完整切换效果轮播图 - 图1<!DOCTYPE html>

    <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .carousel{ position: relative; width: 880px; height: 550px; border: 1px solid #333; margin: 50px auto; } .pic li{ position: absolute; left: 0; top: 0; width: 880px; height: 550px; display: none; } .pic li.current{ display: block; } .btn a{ position: absolute; top: 50%; width: 80px; height: 80px; margin-top: -40px; background-color: rgba(255,255,255,0.3); text-decoration: none; color: #444; text-align: center; line-height: 80px; font-size: 60px; font-family: “SimSun”; } .btn .left{ left: 10px; } .btn .right{ right: 10px; } .btn a:hover{ background-color: rgba(255,255,255,0.7); } .sub{ position: absolute; bottom: 30px; left: 50%; width: 200px; height: 40px; margin-left: -100px; border-radius: 20px; background-color: rgba(255,255,255,0.3); } .sub li{ float: left; width: 20px; height: 20px; margin: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .sub li.current{ background-color: #0ff; } </style> </head> <body> <div class=“carousel” id=“carousel”> <ul class=“pic” id=“pic”> <li class=“current”><img src=“images/lunbo/01.jpg” alt=“”></li> <li><img src=“images/lunbo/02.jpg” alt=“”></li> <li><img src=“images/lunbo/03.jpg” alt=“”></li> <li><img src=“images/lunbo/04.jpg” alt=“”></li> <li><img src=“images/lunbo/05.jpg” alt=“”></li> </ul> <div class=“btn” id=“btn”> <a href=“javascript:;” class=“left” id=“leftbtn”><</a> <a href=“javascript:;” class=“right” id=“rightbtn”>></a> </div> <ol class=“sub” id=“sub”> <li class=“current”></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <script src=“common.js”></script> <script> // 编程思路：信号量编程，通过一个全局变量的信号量，在不同的事件函数中进行信息传递，让多个事件进行协同作业 // 1.获取元素 var carousel = my$(“carousel”); var ul = my$(“pic”); var ulLis = ul.children; var leftbtn = my$(“leftbtn”); var rightbtn = my$(“rightbtn”); var ol = my$(“sub”); var olLis = ol.children; // 全局信号量，存储的是要展示的图片所在 li 的下标 var idx = 0; // 2.右按钮事件，切换到下一张 rightbtn.onclick = rightHandle; // 3.左按钮事件，切换到上一张 leftbtn.onclick = function () { // 信号量自减 idx—; // 判断 idx 是否是超过最小的下标，如果是，就相当于从第一张要切换到最后一张 if (idx < 0) { idx = ulLis.length - 1; } // 调用一个切换函数 change(); }; // 4.下标小圆点事件，点哪个小圆点，对应展示图片 for (var i = 0 ; i < olLis.length; i++) { // 存储自己的下标 olLis[i].index = i; // 给每个小圆点添加点击事件，然后获取对应下标，赋值给信号量 olLis[i].onclick = function () { // 获取当前点击的元素的下标 // this.index idx = this.index; // 调用一个切换函数 change(); }; } // 5.轮播图自动播放,执行类似右按钮的事件 var timer; timer = setInterval(rightHandle,3000); // 6.鼠标移上轮播图，停止自动轮播 carousel.onmouseover = function () { clearInterval(timer); }; // 7.鼠标离开轮播图，重新开始自动轮播 carousel.onmouseout = function () { timer = setInterval(rightHandle,3000); }; // 定义 右按钮事件函数 function rightHandle() { // 信号量自加 idx++; // 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张 if (idx > ulLis.length - 1) { idx = 0; } // 调用一个切换函数 change(); } // 定义切换函数 function change() { // 排他思想 // 对应控制 // 让所有 li 标签清除类名 for (var i = 0 ; i < ulLis.length ; i++) { ulLis[i].className = “”; olLis[i].className = “”; } // 保留自己 ulLis[idx].className = “current”; olLis[idx].className = “current”; } </script> </body> </html>