JavaScript實現原型封裝輪播圖
本文實例為大家分享了JavaScript實現原型封裝輪播圖的具體代碼，供大家參考，具體內容如下
只要用dom元素調用這個方法，傳一個數組進去，里面放的是圖片的路徑。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { padding: 0px; margin: 0px; list-style: none; } .leftBtn { position: absolute; width: 30px; height: 30px; color: black; background-color: cyan; top: 50%; margin-top: -15px; line-height: 30px; text-align: center; opacity: 0.6; cursor: pointer; left: 10px; } .rightBtn { position: absolute; width: 30px; height: 30px; color: black; background-color: cyan; top: 50%; margin-top: -15px; line-height: 30px; text-align: center; opacity: 0.6; cursor: pointer; right: 10px; } .slider { position: absolute; bottom: 20px; width: 100%; text-align: center; cursor: pointer; } .slider span { display: inline-block; width: 8px; height: 8px; background-color: darkgray; border-radius: 50%; margin-left: 10px; } .slider .active { background-color: #f40; } </style></head><body> <div class='div'></div> <div id='div'></div> <script> var div = document.getElementsByClassName(’div’)[0] var oDiv = document.getElementById(’div’) // var arr = [’./tp copy/decade.jpg’, ’./tp copy/decad.jpg’, ’./tp copy/tp.jpg’] HTMLDivElement.prototype.createTurnPage = function (arr) { var arr = (typeof arr != 'object') ? [arr] : arr; //確保參數總是數組 var ul = document.createElement(’ul’); ul.className = ’ul’ this.style.width = ’400px’; this.style.height = 200 + ’px’; this.style.position = ’relative’; this.style.overflow = ’hidden’ this.style.margin = ’200px auto 0px’; this.appendChild(ul); ul.style.width = (1 + arr.length) * parseInt(this.style.width) + ’px’ ul.style.height = this.style.height ul.style.position = ’absolute’ for (let i = 0; i < arr.length + 1; i++) { var li = document.createElement(’li’); var img = document.createElement(’img’); ul.appendChild(li); li.appendChild(img); li.style.width = this.style.width li.style.height = this.style.height li.style.float = ’left’ img.style.width = ’100%’ img.style.height = ’100%’ img.src = arr[i]; } var LastImg = document.createElement(’img’); var liList = document.getElementsByClassName(’ul’)[0].getElementsByTagName(’li’); LastImg.src = arr[0]; LastImg.style.width = ’100%’ LastImg.style.height = ’100%’ liList[liList.length - 1].removeChild(img) liList[liList.length - 1].appendChild(LastImg); var leftBtn = document.createElement(’div’); var rightBtn = document.createElement(’div’); var slider = document.createElement(’div’); for (let i = 0; i < arr.length; i++) { var span = document.createElement(’span’) slider.appendChild(span) } var arrSpan = slider.getElementsByTagName(’span’) this.appendChild(leftBtn) this.appendChild(rightBtn) this.appendChild(slider) slider.className = ’slider’ leftBtn.className = ’leftBtn’; leftBtn.innerHTML = ’<’ rightBtn.className = ’rightBtn’; rightBtn.innerHTML = ’>’ var timer = null; var lock = true var index = 0; var moveWidth = document.getElementsByTagName(’li’)[0].offsetWidth; var num = document.getElementsByTagName(’li’).length - 1; leftBtn.onclick = function () { autoMove(’right->left’) } rightBtn.onclick = function () { autoMove(’left->right’) } for (var i = 0; i < arrSpan.length; i++) { (function (myindex) { arrSpan[myindex].onclick = function () { lock = false; clearTimeout(timer) index = myindex startMove(ul, { left: -index * moveWidth }, function () { lock = true; timer = setTimeout(autoMove, 2000) spanMove(index) }) } }(i)) } function autoMove(direction) { if (lock) { lock = false clearTimeout(timer); if (!direction || direction == ’left->right’) { index++; startMove(ul, { left: ul.offsetLeft - moveWidth }, function () { if (ul.offsetLeft == - num * moveWidth) { ul.style.left = 0 + ’px’ index = 0 } spanMove(index); timer = setTimeout(autoMove, 2000) lock = true }) } else if (direction == ’right->left’) { if (ul.offsetLeft == 0) { ul.style.left = - num * moveWidth + ’px’ index = num } index--; startMove(ul, { left: ul.offsetLeft + moveWidth }, function () { timer = setTimeout(autoMove, 2000) lock = true spanMove(index) }) } } } function spanMove(index) { for (var i = 0; i < arrSpan.length; i++) { arrSpan[i].className = ’’ } arrSpan[index].className = ’active’ } timer = setTimeout(autoMove, 1500) } // div.createTurnPage(arr) oDiv.createTurnPage([’./tp copy/decade.jpg’, ’./tp copy/logo.jpg’, ’./tp copy/decad.jpg’, ’./tp copy/tp.jpg’]) function getStyle(dom, attr) { if (window.getComputedStyle) { return window.getComputedStyle(dom, null)[attr]; } else { dom.currentScript[attr]; } } function startMove(dom, attrObj, callback) { clearInterval(dom.timer); var speed = null, cur = null; dom.timer = setInterval(function () { var stop = true; for (var attr in attrObj) { if (attr == 'opacity') { cur = parseFloat(getStyle(dom, attr)) * 100; } else { cur = parseInt(getStyle(dom, attr)); } speed = (attrObj[attr] - cur) / 7; speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed); if (attr == 'opacity') { dom.style.opacity = (speed + cur) / 100; } else { dom.style[attr] = speed + cur + 'px'; } if (cur != attrObj[attr]) { stop = false; } } if (stop) { clearInterval(dom.timer); typeof callback == 'function' && callback(); } }, 20); } </script></body></html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備