實現效果：點擊序列號切換圖片；點擊上下箭頭切換圖片；每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 {width: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{width: 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;width: 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{width: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>