HTML部分只提供存放輪播圖的容器，img標簽等全部由js操作dom元素動態生成，樣式部分也由js 完成

html代碼部分?

<!-- 創建存放輪播圖片的容器 --><div id="banner"></div><!-- 引入輪播圖插件 --><script src="./plugin/banner.js"></script><script>createBannerArea(document.getElementById("banner"), [{link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/1.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/2.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/3.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/4.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/5.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/6.png"}, {link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",imgUrl: "./img/7.png"}])</script>

?其中createBannerArea（ele,options）中，ele是指獲取到的輪播圖片的容器（dom元素)，options是一個數組，數組的每一位為一個對象，存儲點擊圖片時的跳轉鏈接以及圖片url地址。

js部分

function createBannerArea(areaDom, options) {if (!options || options.length === 0) {return;}//1. 定義變量var imgArea = document.createElement("div"); //裝圖片的divvar numberArea = document.createElement("div"); //裝角標的divvar curIndex = 0; //當前顯示的索引var autoTimer = null; //自動變化計時器var autoRate = 3000; //自動變化間隔//2. 初始化：//2.1 初始化areaDomareaDom.innerHTML = "";areaDom.appendChild(imgArea);areaDom.appendChild(numberArea);//2.2 初始化圖片區域createImgArea();//2.3 初始化角標區域createNumberArea();//2.4 設置顯示狀態show(0);//3. 自動變化autoChange();areaDom.addEventListener("mouseenter", function() {clearInterval(autoTimer);autoTimer = null;})areaDom.addEventListener("mouseleave", function() {autoChange();})//創建圖片區域function createImgArea() {imgArea.style.width = "100%";imgArea.style.height = "100%";imgArea.style.display = "flex";imgArea.style.overflow = "hidden";for (let item of options) {var img = document.createElement("img");img.src = item.imgUrl;img.style.width = "100%";img.style.height = "100%";img.style.display = "block";img.style.marginLeft = "0%";img.style.cursor = "pointer";img.addEventListener("click", function() {if (item.link) {location.href = item.link;}})imgArea.appendChild(img);}}//創建數字區域function createNumberArea() {numberArea.style.textAlign = "center";numberArea.style.marginTop = "-30px";for (var i = 0; i < options.length; i++) {var span = document.createElement("span")span.style.display = "inline-block";span.style.width = "12px"span.style.height = "12px"span.style.background = "lightgray"span.style.cursor = "pointer";span.style.borderRadius = "50%";span.style.margin = "0 5px";(function(index) {span.addEventListener("click", function() {show(index);})})(i)numberArea.appendChild(span);}}//根據指定的索引，設置顯示狀態function show(newIndex) {curIndex = newIndex;for (var i = 0; i < numberArea.children.length; i++) {var num = numberArea.children[i];var imgEle = imgArea.children[i];if (i == curIndex) {num.style.background = "#be926f";imgEle.style.display = "block";} else {num.style.background = "lightgrey";imgEle.style.display = "none";}}}//自動播放函數function autoChange() {if (autoTimer) {return;}autoTimer = setInterval(function() {if (curIndex === options.length - 1) {show(0);} else {show(curIndex + 1);}}, autoRate)} }

?

總結

以上是生活随笔為你收集整理的原生JS实现轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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