本次輪播圖的制作主要分為3個部分，分別是：設置定時器自動輪播；點擊左右切換按鈕輪播；下方點擊按鈕輪播。具體實現步驟如下：

(效果圖)
html部分代碼如下：

<div class="slidebox"><ul class="ul1" id="ul1"><li><img src="img/solid.png" width="100%" height="500px"><p class="slide-p1">走進酒文化&nbsp品味歷史悠酒</p></li><li><img src="img/jiuwh.jpg" width="100%" height="500px"></li><li><img src="img/jiu-1.jpg" width="100%" height="500px"></li><li><img src="img/jiu2.jpg" width="100%" height="500px"></li></ul><div class="left-botton indexs" id="left-botton">&lt;</div><div class="right-botton indexs" id="right-botton">&gt;</div><ul class="ul2 indexs" id="ul2"><li></li><li></li><li></li><li></li></ul></div>

css部分代碼如下：

.slidebox {width: 100%;height: 500px;position: relative;}.slidebox ul {margin: 0;padding: 0;list-style: none;}.ul1 {width: 100%;height: 100%;}.ul1>li {position: absolute;top: 0;left: 0;}.left-botton {margin-left: 50px;width: 80px;height: 80px;background: whitesmoke;text-align: center;color: skyblue;line-height: 70px;position: absolute;font-size: 50px;top: 195px;left: 0;border-radius: 100%;opacity: 0;}.slidebox:hover .left-botton {opacity: 0.8;transition: 0.5s;}.right-botton {margin-right: 50px;width: 80px;height: 80px;background: whitesmoke;opacity: 0;text-align: center;color: skyblue;line-height: 70px;position: absolute;font-size: 50px;top: 195px;right: 0;border-radius: 100%;}.slidebox:hover .right-botton {opacity: 0.8;transition: 0.5s;}.left-botton:hover {cursor: pointer;color: whitesmoke;opacity: 1;background: skyblue;}.right-botton:hover {cursor: pointer;color: whitesmoke;opacity: 1;background: skyblue;}.ul2 {position: absolute;bottom: 25px;right: 560px;}.ul2>li {width: 60px;height: 10px;background: white;line-height: 20px;float: left;border-radius: 3px;margin-right: 30px;}.ul2>li:hover {background: orangered;cursor: pointer;color: white;}.ul2>li:nth-child(1) {background: orangered;color: white;}.ul1>li:nth-child(1) {z-index: 100;}.indexs {z-index: 200;}

JS部分代碼如下：

var imgs = document.getElementById("ul1").children; //找到需要操作的所有圖片var botton = document.getElementById("ul2").children; //找到需要操作的所有下方點擊按鈕var leftbotton = document.getElementById("left-botton"); //找到需要操作的左切換按鈕var rightbotton = document.getElementById("right-botton"); //找到需要操作的右切換按鈕var index = 0; //標記當前展示圖片的索引var dingshiqi; //定義定時器chongqi(); //調用重啟定時器//綁定定時器自動切換事件function chongqi() {dingshiqi = setInterval(function() {index++; //跳轉到下一張圖片if (index == imgs.length) {index = 0;} //使圖片無限循環(huán)播放for (var i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當前圖片botton[index].style.cssText = "background:orangered;"; //使當前指定點擊按鈕的背景顏色變成紅色}, 4000); //定時器每隔4秒自動跳轉到下一張圖片}//綁定左切換按鈕的點擊事件leftbotton.onclick = function() {clearInterval(dingshiqi); //關閉定時器index--; //跳轉到上一張圖片if (index < 0) {index = imgs.length - 1;}for (var i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當前圖片botton[index].style.cssText = "background:orangered;"; //使當前指定點擊按鈕的背景顏色變成紅色chongqi(); //重啟定時器}//綁定右切換按鈕的點擊事件rightbotton.onclick = function() {clearInterval(dingshiqi); //關閉定時器index++; //跳轉到下一張圖片if (index > imgs.length - 1) {index = 0;} for (var i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當前圖片botton[index].style.cssText = "background:orangered;"; //使當前指定點擊按鈕的背景顏色變成紅色chongqi(); //重啟定時器}//綁定所有點擊按鈕的點擊事件for (let i = 0; i < imgs.length; i++) {botton[i].onclick = function() {clearInterval(dingshiqi); //關閉定時器index = i;for (let i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當前圖片this.style.cssText = "background:orangered;"; //使當前指定點擊按鈕的背景顏色變成紅色chongqi(); //重啟定時器}}

通過以上步驟就可以實現一個完整的輪播圖效果了

總結

以上是生活随笔為你收集整理的如何用JavaScript实现轮播图（幻灯片）的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。