本次輪播圖的制作主要分為3個(gè)部分，分別是：設(shè)置定時(shí)器自動(dòng)輪播；點(diǎn)擊左右切換按鈕輪播；下方點(diǎn)擊按鈕輪播。具體實(shí)現(xiàn)步驟如下：

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

<div class="slidebox"><ul class="ul1" id="ul1"><li><img src="img/solid.png" width="100%" height="500px"><p class="slide-p1">走進(jìn)酒文化&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; //找到需要操作的所有下方點(diǎn)擊按鈕var leftbotton = document.getElementById("left-botton"); //找到需要操作的左切換按鈕var rightbotton = document.getElementById("right-botton"); //找到需要操作的右切換按鈕var index = 0; //標(biāo)記當(dāng)前展示圖片的索引var dingshiqi; //定義定時(shí)器chongqi(); //調(diào)用重啟定時(shí)器//綁定定時(shí)器自動(dòng)切換事件function chongqi() {dingshiqi = setInterval(function() {index++; //跳轉(zhuǎn)到下一張圖片if (index == imgs.length) {index = 0;} //使圖片無(wú)限循環(huán)播放for (var i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點(diǎn)擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當(dāng)前圖片botton[index].style.cssText = "background:orangered;"; //使當(dāng)前指定點(diǎn)擊按鈕的背景顏色變成紅色}, 4000); //定時(shí)器每隔4秒自動(dòng)跳轉(zhuǎn)到下一張圖片}//綁定左切換按鈕的點(diǎn)擊事件leftbotton.onclick = function() {clearInterval(dingshiqi); //關(guān)閉定時(shí)器index--; //跳轉(zhuǎn)到上一張圖片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;"; //使所有點(diǎn)擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當(dāng)前圖片botton[index].style.cssText = "background:orangered;"; //使當(dāng)前指定點(diǎn)擊按鈕的背景顏色變成紅色chongqi(); //重啟定時(shí)器}//綁定右切換按鈕的點(diǎn)擊事件rightbotton.onclick = function() {clearInterval(dingshiqi); //關(guān)閉定時(shí)器index++; //跳轉(zhuǎn)到下一張圖片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;"; //使所有點(diǎn)擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當(dāng)前圖片botton[index].style.cssText = "background:orangered;"; //使當(dāng)前指定點(diǎn)擊按鈕的背景顏色變成紅色chongqi(); //重啟定時(shí)器}//綁定所有點(diǎn)擊按鈕的點(diǎn)擊事件for (let i = 0; i < imgs.length; i++) {botton[i].onclick = function() {clearInterval(dingshiqi); //關(guān)閉定時(shí)器index = i;for (let i = 0; i < imgs.length; i++) {imgs[i].style.cssText = "z-index:0;"; //隱藏所有圖片botton[i].style.cssText = "background:white;"; //使所有點(diǎn)擊按鈕的背景顏色變成白色}imgs[index].style.cssText = "z-index:100;"; //顯示當(dāng)前圖片this.style.cssText = "background:orangered;"; //使當(dāng)前指定點(diǎn)擊按鈕的背景顏色變成紅色chongqi(); //重啟定時(shí)器}}

通過(guò)以上步驟就可以實(shí)現(xiàn)一個(gè)完整的輪播圖效果了

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。