使用Jquery实现轮播图

冷不防 2023-10-15 22:52 40阅读 0赞

虽然轮播图已经有很多第三方库，但是手动实现一个还是能够对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元素的样式控制，轮播图中对索引越界的判断。