【源代码】
链接：https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码：w104
【整体构思】
这个轮播图使用的是jQuery,所以Js的整体代量比较少.
轮播图,其实思路可以很多
第一种:
通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为 1，而其他的设为0，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的透明度和定时器来触发该函数，改变不同图片的透明度。
第二种:
通过修改每一张图片的display，让其每隔一段时间将其中的某一张图片为block，而其他的设为none，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的display和定时器来触发该函数，改变不同图片的display样式。
更多的思路,留给你们展示~
HTML代码
<!-- * * * @Author: wyy * @Date: 2018-08-20 18:20:13 * @Email: 2752154874@qq.com * @Last Modified by: wyy * @Last Modified time: 2018-08-21 20:06:51 * * --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="banner"> <!-- 轮播图 --> <ul class="bg"> <li class="current"><a href="#"><img src="./img/banner.jpg" alt="banner" width="1226" height="460"></a></li> <li><a href="#"><img src="./img/banner2.jpg" alt="banner" width="1226" height="460"></a></li> <li><a href="#"><img src="./img/banner3.jpg" alt="banner" width="1226" height="460"></a></li> <li><a href="#"><img src="./img/banner4.jpg" alt="banner" width="1226" height="460"></a></li> <li><a href="#"><img src="./img/banner5.jpg" alt="banner" width="1226" height="460"></a></li> <li><a href="#"><img src="./img/banner6.jpg" alt="banner" width="1226" height="460"></a></li> </ul> <!-- 左右箭头 --> <div class="left"></div> <div class="right"></div> <!-- 小圆点 --> <div class="list"> <ul> <li id="bg_1" class="list-btn current"></li> <li id="bg_2" class="list-btn"></li> <li id="bg_3" class="list-btn"></li> <li id="bg_4" class="list-btn"></li> <li id="bg_5" class="list-btn"></li> <li id="bg_6" class="list-btn"></li> </ul> </div> </div> </body> </html>
CSS代码
/* * @Author: wyy * @Date: 2018-08-20 18:26:46 * @Email: 2752154874@qq.com * @Last Modified by: wyy * @Last Modified time: 2018-08-21 20:30:32 */ *{ margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .banner { width: 1226px; height: 460px; margin: 0 auto; position: relative; } a { color: #fff; } a:hover { color: #FFAA07FF; } a:hover .second { display: block; } .bg li{ list-style: none; float: left; display: none; position: absolute; } .bg li.current{ display: block; } .left { width: 40px; height: 70px; background: url("../img/icon-slides.png") 83px 0px; position: absolute; top: 42%; } .left:hover { background-position: 0px 0px; } .right { width: 40px; height: 70px; background: url("../img/icon-slides.png") 40px 0px; position: absolute; right: 0px; top: 42%; } .right:hover { background-position: -43px 0px; } .list { width: 145px; height: 20px; position: absolute; right: 30px; bottom: 15px; } .list-btn { width: 12px; height: 12px; list-style: none; float: left; background: lightgrey; margin-left: 6px; border-radius:6px; cousor:pointer; } .list ul .current{ background: #f88535; }
JS代码
/* * @Author: wyy * @Date: 2018-08-20 18:40:26 * @Email: 2752154874@qq.com * @Last Modified by: wyy * @Last Modified time: 2018-08-21 20:48:06 */ // 全局变量 var index = 0; $(function() { // 定时器 (function() { setInterval(function() { // 自动换图代码 changePic(); // 改变index值 index++; if (index == 5) { index = 0; } }, 1000) })(); // 找到所有的图片 var pics = $(".bg li"); // 找到所有的小圆点 var lis = $(".list li"); // 提取公共的换图方法 function changePic() { // 控制li的class实现换图 pics.eq(index).addClass("current").siblings().removeClass("current"); // 给当前的元素添加class并移除兄弟元素的class // 控制小圆点颜色变化 lis.eq(index).addClass("current").siblings().removeClass("current"); } // 点击小圆点换图 lis.click(function() { // 改变index的值 index = $(this).index(); //this代表当前每一个li元素 // F12查看日志,查看索引是否正确 // console.log(index); //调用函数 changePic(); }) // 点击左右箭头换图 $(".left").click(function() { // 点击左侧箭头 index--; if (index == -1) { index = 5; } changePic(); }) $(".right").click(function() { // 点击右侧箭头 index++; if (index == 6) { index = 0; } changePic(); }) })