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圖片輪播
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。