使用Jquery实现轮播图
虽然轮播图已经有很多第三方库，但是手动实现一个还是能够对javascript有一个更深的理解。
今天就讲一讲如何使用Jquery实现轮播图
首先html结构如下：
<div class="scroll">
// 结合下面的css样式可以知道： 下面是五张轮播图片一开始重叠在
// 父级元素的左上角，轮播图在JS中是通过opacity透明度来控制是否显示的
<ul id="scroll">
<li><a href="plus5.html"><img src="img/scroll_01.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_02.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_03.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_04.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_05.jpg" alt=""></a></li>
<li><a href="plus5.html"><img src="img/scroll_06.jpg" alt=""></a></li>
</ul>
<div class="scroll_dot">
<!-- 以下是六个圆点的占位 -->
<span class="scroll_dot_span"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="scroll_arrows">
<a href="javascript:void(0);"><span class="left scroll_arrows_back">〈</span></a>
<a href="javascript:void(0);"><span class="right scroll_arrows_back">〉</span> </a>
</div>
</div>
CSS样式如下：
.scroll #scroll img {
width: 1226px;
position: absolute;
top: 0;
left: 0;
}
.scroll_dot {
width: 120px;
height: 10px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 20;
}
.scroll_dot span {
width: 6px;
height: 6px;
border: 2px solid #e0e0e0;
background: #cdcac2;
border-radius: 50%;
margin: 0 5px;
display: block;
float: left;
}
.scroll_dot .scroll_dot_span {
background: white;
}
.scroll_arrows span {
width: 41px;
height: 70px;
text-align: center;
line-height: 69px;
color: #5f5750;
position: absolute;
top: 50%;
font-size: 40px;
z-index: 20;
margin-top: -35px;
}
.scroll_arrows .scroll_arrows_back {
background: #5f5750;
color: white;
}
.scroll_arrows .left {
left: 260px;
}
.scroll_arrows .right {
right: 0;
}
下面重点看一下JS部分是如何实现的
var n = 0; //记录轮播图当前索引
var t = setInterval(fun, 5000); // 设置一个定时器用于播放轮播图
// 重点： 轮播图的播放函数，
function fun() {
n++;
// 此时判断轮播图索引是否越界，如果越界则将n重置为0
if (n > $(".scroll>ul>li").length - 1) {
n = 0;
}
// 这里可以看到是通过opacity来控制轮播图是否显示的
// eq(n)表示从当前li集合中指定索引为n的元素
$(".scroll>ul>li").css("opacity", "0").eq(n).css("opacity", "1")
// 控制轮播图下面的圆点样式，实现圆点跟随轮播图移动（移动的圆点是白色背景，默认是灰色背景，白色更显眼） ， siblings表示该元素所在集合中的其他兄弟元素 $(".scroll_dotspan").eq(n).addClass("scroll_dot_span").siblings().removeClass("scroll_dot_span");
}
// 点击左箭头让轮播图回调到上一张图片
$(".scroll_arrows .left").click(function () {
n -= 2; // 这里减二，是因为fun函数中: n会自增+1，而后面会调用fun函数。
if (n < -1) { // 这里是判断越界：如果当前已经是第一张图片，那么再回退就轮转到最后一张图片，也就是索引是5，但是fun函数会自增加1，所以n取值4。
左越界的标准是小于-1是因为如果是-1，那么到了fun函数自增+1就变成了0，那么就是第一张图片了，相当于原地不动。
n = 4;
}
fun()
});
// 点击右箭头让图片快进一张
$(".scroll_arrows .right").click(function () {
fun()
});
// 点击轮播图圆点时，将图片切换到该圆点索引对应的图片
$(".scroll_dot span").click(function () {
// 获取点击圆点的索引
n = $(this).index() - 1; // index()函数是jquey中获取该元素在所属集合中的索引。
// 将除了被点击圆点之外的圆点都设置为默认灰色背景，当前被点击圆点的背景设为白色
$(this).siblings().removeClass("scroll_dot_span").end().addClass("scroll_dot_span");
fun() // 播放圆点对应的图片
});
// 这里hover函数接收两个参数：移入时执行的函数和移出时的函数，中间用逗号做分隔符
// 这是jquery hover方法特有用法
$(".scroll").hover(function () {
clearInterval(t); // 鼠标移入时清除定时器
}, function () {
// 鼠标移出时，又设置了一个定时器
t = setInterval(fun, 5000);
});
从以上代码可以看到：代码的核心是js定时器, 全局图片索引的确定，jquery对dom元素的样式控制，轮播图中对索引越界的判断。