实现效果：点击序列号切换图片；点击上下箭头切换图片；每3s自动切换图片；鼠标移入停止自动切换，移出开始自动切换。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 * {margin:0; padding:0;} 8 li{list-style:none; } 9 10 #div1 {850px; height:500px; margin:50px auto; overflow:hidden; position:relative;} 11 #div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;} 12 #div1 ul li.ac{z-index: 5;opacity: 1;} 13 #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6} 14 #div1 ol li{ 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;} 15 #div1 ol li.ac{background: red;color: #fff;} 16 #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center; 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;} 17 #goPrev{left: 0;} 18 #goNext{right: 0;} 19 img{850px; height:500px;} 20 </style> 21 </head> 22 23 <body> 24 <div id="div1"> 25 <ul> 26 <li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li> 27 <li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li> 28 <li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li> 29 <li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li> 30 <li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li> 31 </ul> 32 <ol> 33 <li class="ac">1</li> 34 <li>2</li> 35 <li>3</li> 36 <li>4</li> 37 <li>5</li> 38 </ol> 39 <a href="javascript:;" id="goPrev">«</a> 40 <a href="javascript:;" id="goNext">»</a> 41 </div> 42 <script> 43 var div = document.querySelector('#div1'), 44 imgs = div.querySelectorAll('ul li'), 45 btns = div.querySelectorAll('ol li'), 46 goPrev = document.querySelector('#goPrev'), 47 goNext = document.querySelector('#goNext') 48 49 var index = 0 // 当前图片的下标，默认为0 50 var lastIndex = 0 // 上一张图片的下标，默认为0 51 var timer = null 52 53 // 按钮切换 54 Array.from(btns).forEach((btn, i) => { 55 btn.onclick = function () { 56 // 要让上一张图片去掉ac，再给当前图片加上ac 57 // index的值应该更新成当前点击的下标 58 59 // 把index先变成lastIndex，然后再把index赋值为当前的i 60 lastIndex = index 61 index = i 62 change() 63 } 64 }) 65 66 // 向后切换 67 goNext.onclick = function () { 68 lastIndex = index 69 index++ 70 // index的范围只能是0~length-1 所以一旦等于length代表超出了，那就回到0 71 if (index === imgs.length) index = 0 72 change() 73 } 74 75 // 向前切换 76 goPrev.onclick = function () { 77 lastIndex = index 78 index-- 79 if (index < 0) index = imgs.length - 1 80 change() 81 } 82 83 // 自动切换 84 autoPlay() // 默认先自动播放起来 85 function autoPlay () { 86 timer = setInterval(() => { 87 // 每阁3s触发一次向后按钮的点击事件 88 // 给对象绑事件，可以直接作为函数来调用 89 goNext.onclick() 90 }, 3000) 91 } 92 93 div.onmouseenter = function () { 94 clearInterval(timer) 95 } 96 div.onmouseleave = function () { 97 autoPlay() 98 } 99 100 // 通过index和lastIndex来切换图片和按钮 101 function change () { 102 // 上一张图片和上一个按钮去掉ac再给当前图片和当前按钮加上ac 103 imgs[lastIndex].classList.remove('ac') 104 imgs[index].classList.add('ac') 105 btns[lastIndex].classList.remove('ac') 106 btns[index].classList.add('ac') 107 } 108 </script> 109 </body> 110 </html>