您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何實現(xiàn)用js原生輪播圖插件制作”,在日常操作中,相信很多人在如何實現(xiàn)用js原生輪播圖插件制作問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”如何實現(xiàn)用js原生輪播圖插件制作”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
調(diào)用時也只需要寫一個DIV即可
調(diào)用的js部分配置內(nèi)容:
傳入輪播圖需顯示的位置(div)
傳入圖片和點擊跳轉(zhuǎn)的鏈接
話不多說,上代碼
HTML
<div id="banner"></div>
HTML文檔內(nèi)的<script>,這里是輪播圖的配置內(nèi)容,一共兩個參數(shù),第一個是需要傳入的DIV(輪播圖所顯示的區(qū)域),第二個參數(shù)是一個數(shù)組,數(shù)組里的元素是一個個對象,對象里第一個屬性imgUrl表示圖片,第二個屬性link表示跳轉(zhuǎn)鏈接
一個數(shù)組元素就是一張圖片,不限數(shù)量,可自適應(yīng)
<script> bannerArea(document.getElementById("banner"),[ {imgUrl:"圖片", link:"跳轉(zhuǎn)鏈接" }, {imgUrl:"圖片", link:"跳轉(zhuǎn)鏈接" }, {imgUrl:"圖片", link:"跳轉(zhuǎn)鏈接" } ]) </script>
JS插件內(nèi)容
// 兩個參數(shù),第一個輪播圖區(qū)域,第二個是配置 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();//創(chuàng)建一個區(qū)域來顯示圖片 initNumber();//創(chuàng)建區(qū)域顯示角標 setStatus();//設(shè)置狀態(tài) autoChange();//自動切換 //下面是局部函數(shù) //創(chuàng)建圖片,并且設(shè)置樣式 function initImg() { imgArea.style.width = "100%"; imgArea.style.height = "100%"; imgArea.style.display = "flex"; imgArea.style.overflow = "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); } //創(chuàng)建角標元素和設(shè)置樣式 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); } //設(shè)置角標區(qū)域狀態(tài) function setStatus() { //設(shè)置圓圈的背景顏色 for (var i = 0; i < options.length; i++) { if (i === curIndex) { //設(shè)置背景顏色為選擇 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 += speed * 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) { return; } changeTimer = setInterval(function () { if (curIndex === options.length - 1) { curIndex = 0; } else { curIndex++; } setStatus(); }, changeDuration) } }
輪播圖速度(切換時間)可在插件代碼中 var changeDuration = 1000;//間隔 一句里調(diào)整
到此,關(guān)于“如何實現(xiàn)用js原生輪播圖插件制作”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。