jquery简单的轮播效果!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css" media="screen">
.content{width: 500px; height: 500px;position: relative; margin:50px auto; }
.content span{cursor:pointer;width: 20px; height: 20px; display: inline-block; position: absolute;background-color:#f00; top:50%; margin-top: -10px; }
.content #prev{left: 10px;}
#bgcc{width: 400px; height: 400px; background-color: #ccc;position: absolute; top: 50px; left: 50px;}
.content #next{right: 10px;}
#picNum{position: absolute; width: 80px; text-align: center; top: 26px; display: inline-block; left: 50%; margin-left: -40px; font-size: 18px;}
</style>
</head>
<body>
<div class="content">
<span id='prev'></span>
<span id='next'></span>
<strong id="picNum">图片计算ing</strong>
<div id="bgcc"></div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var $prev=$('#prev'),
$next=$('#next'),
$bgcc=$('#bgcc'),
$picNum=$('#picNum'),
$arrbg=['#414381','red','green','blue','#6df8a5'], //更换的背景颜色
nuec=0;
$bgcc.css('background-color',$arrbg[nuec]); //初始化背景颜色为0
$('#picNum').html(nuec+1+'/'+ $arrbg.length); //初始化计算的个数为 1/5
$prev.click(function(ev){
ev.preventDefault();
nuec--;
if(nuec==-1){ //当点击数组的个数等于-1的时候,回到最后一个背景颜色
nuec=($arrbg.length-1);
}
$bgcc.css('background-color',$arrbg[nuec]);
$('#picNum').html(nuec+1 +'/'+ $arrbg.length)
})
$next.click(function(ev){
ev.preventDefault();
nuec++;
if(nuec==($arrbg.length)){ //当点击的个数为总数的时候,回到第一个位置
nuec=0
} $bgcc.css('background-color',$arrbg[nuec]);
$('#picNum').html(nuec+1+'/'+ $arrbg.length)
}) }) </script>
</body>
</html>
jquery简单的轮播效果!的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
- Jquery实现左右轮播效果
首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...
- MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...
- [转]jQuery实现图片轮播效果,jQuery实现焦点新闻
本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- jQuery简单的轮播特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用JQuery实现图片轮播效果
[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...
- jQuery带缩略图轮播效果图片切换带缩略图
以上为效果图 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
随机推荐
- 编译OpenCV文档
概述 使用OpenCV的过程中经常查看文档,每次都去官网查看,不过国内访问速度很慢,有一份本地的文档就好了.本文列出了在Linux(Fedora)系统上从OpenCV源码编译出documentatio ...
- mybatis : trim标签, “等于==”经验, CDATA标签 ,模糊查询CONCAT,LIKE
一.My Batis trim标签有点类似于replace效果. trim 属性, prefix:前缀覆盖并增加其内容 suffix:后缀覆盖并增加其内容 prefixOverrides:前缀判断的条 ...
- webapi returntype
- 查看IO负载
负载(load)是linux机器的一个重要指标,直观了反应了机器当前的状态.如果机器负载过高,那么对机器的操作将难以进行. Linux的负载高,主要是由于CPU使用.内存使用.IO消耗三部分构成.任意 ...
- Java多线程 3 线程同步
在之前,已经学习到了线程的创建和状态控制,但是每个线程之间几乎都没有什么太大的联系.可是有的时候,可能存在多个线程多同一个数据进行操作,这样,可能就会引用各种奇怪的问题.现在就来学习多线程对数据访问的 ...
- [C#]如何让webbrowser控件支持Html5
最近因为项目的需要,需要研究在C#winform窗体中加载网页,和弹出提醒,但我们的网站是HTML5的,ie浏览器内核不支持,而且因为根据客户机系统的不一致,加载的ie内核可能是不同,显示的效果也会不 ...
- SQL语句判断数据库、表、字段是否存在
from master..sysdatabases where name='TestDB') print 'TestDB存在'else print 'TestDB不存在' --判断表[Te ...
- 浅谈Java中的equals和==(转)
浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...
- 关于MySQL的wait_timeout连接超时问题报错解决方案
bug回顾 : 想必大家在用MySQL时都会遇到连接超时的问题,如下图所示: ### Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsExce ...
- java基础 绘图技术.坦克大战 之java绘图坐标体系(一)
坐标体系介绍 下图说明了java坐标体系.坐标原点位于左上角,以像素为单位,像素是计算机屏幕上最小的显示单位.在java的坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素:第二个 ...