JavaScript實現(xiàn)原型封裝輪播圖
本文實例為大家分享了JavaScript實現(xiàn)原型封裝輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
只要用dom元素調(diào)用這個方法，傳一個數(shù)組進去，里面放的是圖片的路徑。
<!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; //確保參數(shù)總是數(shù)組 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圖片輪播
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境2. jsp中sitemesh修改tagRule技術(shù)分享3. Docker究竟是什么 為什么這么流行 它的優(yōu)點和缺陷有哪些？4. docker容器調(diào)用yum報錯的解決辦法5. IntelliJ IDEA導(dǎo)出項目的方法6. Django中如何使用Channels功能7. idea設(shè)置代碼格式化的方法步驟8. intellij idea寫Python教程9. python的json包位置及用法總結(jié)10. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題
網(wǎng)公網(wǎng)安備