JavaScript实现原型封装轮播图

时间：2021-05-26

本文实例为大家分享了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 = '&lt;' rightBtn.className = 'rightBtn'; rightBtn.innerHTML = '&gt;' 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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章