js原生輪播圖外掛製作
阿新 • • 發佈:2021-10-08
本文例項為大家分享了原生輪播圖外掛製作的具體程式碼,供大家參考,具體內容如下
呼叫時也只需要寫一個DIV即可
呼叫的js部分配置內容:
傳入輪播圖需顯示的位置(div)
傳入圖片和點選跳轉的連結
話不多說,上程式碼
HTML
<div id="banner"></div>
HTML文件內的<script>,這裡是輪播圖的配置內容,一共兩個引數,第一個是需要傳入的DIV(輪播圖所顯示的區域),第二個引數是一個數組,數組裡的元素是一個個物件,物件裡第一個屬性imgUrl表示圖片,第二個屬性link表示跳轉連結
一個數組元素就是一張圖片,不限數量,可自適應
<script> bannerArea(document.getElementById("banner"),[ {imgUrl:"圖片",link:"跳轉連結" },{imgUrl:"圖片",link:"跳轉連結" } ]) </script>
JS外掛內容
// 兩個引數,第一個輪播圖區域,第二個是配置 function bannerArea(areaDom,options) { var imgArea = document.createElement("div"); var numberArea = document.createElement("div"); var curIndex = 0;//第幾張輪播圖 var changeTimer = null; var changeDuration = 1000;//間隔 var timer = null; initImg();//建立一個區域來顯示圖片 initNumber();//建立區域顯示角標 setStatus();//設定狀態 autoChange();//自動切換 //下面是區域性函式 //建立圖片,並且設定樣式 function initImg() { imgArea.style.width = "100%"; imgArea.style.height = "100%"; imgArea.style.display = "flex"; imgArea.style.overflow = UBpPCnQQ"hidden"; for (let i = 0; i < options.length; i++) { var obj = options[i]; var img = document.createElement("img"); img.src = obj.imgUrl; img.style.width = "100%"; img.style.height = "100%"; img.style.margin = "0"; img.addEventListener("click",function () { location.href = options[i].link; }) imgArea.appendChild(img); } imgArea.addEventListener("mouseenter",function () { clearInterval(changeTimer); changeTimer = null; }) imgArea.addEventListener("mouseleave",function () { autoChange(); }) areaDom.appendChild(imgArea); } //建立角標元素和設定樣式 function initNumber() { numberArea.style.textAlign = "center"; numberArea.style.marginTop = "-25px"; for (let i = 0; i < options.length; i++) { var sp = document.createElement("span"); sp.style.width = "12px"; sp.style.height = "12px"; sp.style.background = "lightgray"; sp.style.display = "inline-block"; sp.style.margin = "0 7px"; sp.style.borderRadius = "50%"; sp.style.cursor = "pointer"; sp.addEventListener("click",function () { curIndex = i; setStatus(); }) numberArea.appendChild(sp); } areaDom.appendChild(numberArea); } //設定角標區域狀態 function setStatus() { //設定圓圈的背景顏色 for (var i = 0; i < options.length; i++) { if (i === curIndex) { //設定背景顏色為選擇 numberArea.children[i].style.background = "rgb(222 57 57)"; } else { //非選擇 numberArea.children[i].style.background = "lightgray";; } } //顯示圖片 var start = parseInt(imgArea.children[0].style.marginLeft); var end = curIndex * -100; var dis = end - start; var duration = 500; var speed = dis / duration; if (timer) { clearInterval(timer); } timer = setInterval(function () { start += spUBpPCnQQeed * 20; imgArea.children[0].style.marginLeft = start + "%"; if (Math.abs(end - start) < 1) { imgArea.children[0].style.marginLeft = end + "%"; clearInterval(timer); } },20) } //自動切換 function autoChange() { if (changeTimer)UBpPCnQQ { return; } changeTimer = setInterval(function () { if (curIndex === options.length - 1) { curIndex = 0; } else { curIndex++; } setStatus(); },changeDuration) } }
輪播圖速度(切換時間)可在外掛程式碼中 var changeDuration = 1000;//間隔 一句裡調整
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。