使用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);

});