案例：jQuery 如何实现图片轮播效果

一、HTML部分

1、首先，我们先在页面中添加四张图片，以及无序列表

<div class="bodyer_last"> <div class="bodyerlast_1" style="background: url(img/1.jpg) no-repeat center;background-size: 100% 100%;"></div> <div class="bodyerlast_1" style="background: url(img/2.jpg) no-repeat center;background-size: 100% 100%;"></div> <div class="bodyerlast_1" style="background: url(img/3.jpg) no-repeat center;background-size: 100% 100%;"></div> <div class="bodyerlast_1" style="background: url(img/4.jpg) no-repeat center;background-size: 100% 100%;"></div> <ul> <li class="li"></li> <li></li> <li></li> <li></li> </ul> </div> </div>

二、CSS部分

2、设置4张图片的样式，使其绝对定位，同时给父元素相对定位

.bodyer_last { position: relative; } .bodyerlast_1 { width: 100%; height: 510px; position: absolute; }

3、设置无序列表的样式，使其出现“按钮状”，并用样式对其进行布局

.bodyer_last ul { width: 368px; height: 20px; position: absolute; left: 40%; top: 420px; display: inline-block; } .bodyer_last li { width: 60px; height: 18px; background-color: black; border: 1px dotted white; float: left; margin: 0 15px; list-style: none; }

4、此时会出现如下效果图

三、jQuery部分

5、首先我们需导入 jQuery 文件

<script src="js/jquery-3.3.1.js"></script>

6、新建 Script 标签，用于书写 jQuery 代码，具体内容如下

<script> var _index = 0; // 初始化序列 var timeplay = null; // show显示 hide隐藏 $(".bodyerlast_1").eq(0).show().siblings("div").hide(); //最开始显示第一张图片 $(".bodyer_last li").hover(function() { // 鼠标移入 clearTimeout(timeplay); //清除定时播放器 _index = $(this).index(); // 获取当前序列号 // alert(_index); 弹框 //addClass()方法是向被选元素添加一个或多个类 //.siblings()同胞元素 //.removeClass()方法是从被选元素移除一个或多个类 $(this).addClass("li").siblings().removeClass("li"); //fadeIn()逐渐淡入 fadeOut逐渐淡出 $(".bodyerlast_1").eq(_index).fadeIn().siblings("div").fadeOut(); }, function() { // 鼠标移开 autoplay(); // 启用定时播放器 }); function autoplay() { // 设置定时器 timeplay = setInterval(function() { _index++; if(_index < 4) { $(".bodyer_last li").eq(_index).addClass("li").siblings().removeClass("li"); //显示按钮 $(".bodyerlast_1").eq(_index).fadeIn().siblings("div").fadeOut(); //显示图片 // alert(_index); } else { _index = -1; } //设置序列号为-1，跳到播放第一张图片 }, 2000); }; autoplay(); </script>

注意：由于程序是由上至下依次执行的，因此，我们在书写 jQuery 代码时，应位于 HTML代码之下。

不染-何程龙 认证博客专家 Python Java SQL 何程龙，大学计算机信息管理专业在读，现就任后端开发工程师、数据库工程师。曾担任城建创新创业学院理事会会长，现为博客专家、签约讲师，中国开源协会-开发分会管理委员会委员。带过多批学员，因授课耐心细致，通俗易懂，风趣幽默，富有激情，受学员一致好评。现主要从事软件开发及软件教育培训，具有丰富的实战经验，善于将复杂问题简单化，擅长Web前端、JavaScript框架、Java并发、C#编程、Python Web、数据库SQL等领域及技术。