<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09轮播图作业</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.wrapper {
position: relative;
width: 400px;
height: 250px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
.wrapper .sliderPage {
position: absolute;
width: 2000px;
height: 250px;
}
.wrapper .sliderPage li {
float: left;
width: 400px;
height: 250px;
}
.wrapper .sliderPage li img {
width: 400px;
height: 250px;
}
.wrapper .btn {
position: absolute;
width: 40px;
height: 40px;
background-color: #000;
color: #fff;
top: 50%;
margin-top: -20px;
opacity: 0.1;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.wrapper .btn:hover {
opacity: 1;
}
.wrapper .leftBtn {
left: 15px;
}
.wrapper .rightBtn {
right: 15px;
}
.wrapper .sliderIndex {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
}
.wrapper .sliderIndex span {
display: inline-block;
width: 8px;
height: 8px;
background-color: #ccc;
cursor: pointer;
border-radius: 50%;
margin: 5px;
}
.wrapper .sliderIndex span.active {
background-color: #f40;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- <ul class="sliderPage">
<li>
<img src="imgs/1.jpg" alt="">
</li>
<li>
<img src="imgs/2.jpg" alt="">
</li>
<li>
<img src="imgs/3.jpg" alt="">
</li>
<li>
<img src="imgs/4.jpg" alt="">
</li>
<li>
<img src="imgs/1.jpg" alt="">
</li>
</ul>
<div class="btn leftBtn"><</div>
<div class="btn rightBtn">></div>
<div class="sliderIndex">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div> -->
</div>
<script src="utils.js"></script>
<script>
HTMLDivElement.prototype.createTurnPage = function (imgArr) {
var self = this;
createLi(imgArr);
var oSliderPage = document.getElementsByClassName('sliderPage')[0];
var oLeftBtn = document.getElementsByClassName('leftBtn')[0];
var oRightBtn = document.getElementsByClassName('rightBtn')[0];
var oSliderIndex = document.getElementsByClassName('sliderIndex')[0];
var oSpan = oSliderIndex.getElementsByTagName('span');
var moveWidth = oSliderPage.children[0].offsetWidth;
var num = oSliderPage.children.length - 1;
var timer = null;
var lock = true; // 开锁
var index = 0; // 小圆点下标
var oSpanLen = oSpan.length;
oLeftBtn.onclick = function () {
autoMove('right->left');
}
oRightBtn.onclick = function () {
autoMove('left->right');
}
for (var i = 0; i < oSpanLen; i++) {
(function (myIndex) {
oSpan[i].onclick = function () {
lock = false;
clearTimeout(timer);
startMove(oSliderPage, {
left: - myIndex * moveWidth
}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(myIndex);
})
}
}(i))
}
timer = setTimeout(autoMove, 1500);
// direction
// 默认轮播方向/right按钮 'left->right' / 默认时为undefined
// 点击left按钮 'right->left'
function autoMove(direction) {
if (lock) {
lock = false;
clearTimeout(timer); // 清除才不会一直加速
if (!direction || direction == 'left->right') {
index++;
startMove(oSliderPage, {
left: oSliderPage.offsetLeft - moveWidth
}, function () {
if (oSliderPage.offsetLeft == - num * moveWidth) {
oSliderPage.style.left = '0px';
index = 0;
}
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
});
} else if (direction == 'right->left') {
index--;
startMove(oSliderPage, {
left: oSliderPage.offsetLeft + moveWidth
}, function () {
if (oSliderPage.offsetLeft == 0) {
oSliderPage.style.left = - num * moveWidth + 'px';
index = num;
}
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
})
}
}
}
function changeIndex(_index) {
for (var i = 0; i < oSpanLen; i++) {
oSpan[i].className = '';
}
oSpan[_index].className = 'active';
}
function createLi(imgArr) {
var liStr = '';
imgArr.forEach(function (ele) {
liStr += '<li>\
<img src="' + ele + '" alt="">\
</li>'
});
var htmlStr =
'<ul class="sliderPage">' + liStr + '\
</ul>\
<div class="btn leftBtn"><</div>\
<div class="btn rightBtn">></div>\
<div class="sliderIndex">\
<span class="active"></span>\
<span></span>\
<span></span>\
<span></span>\
</div>';
self.innerHTML = htmlStr;
}
}
var oWrapper = document.getElementsByClassName('wrapper')[0];
oWrapper.createTurnPage(['imgs/1.jpg', 'imgs/2.jpg', 'imgs/3.jpg', 'imgs/4.jpg', 'imgs/1.jpg']);
</script>
</body>
</html>
js轮播图生成器
猜你喜欢
转载自blog.csdn.net/qq1123642601/article/details/88737814
今日推荐
周排行