轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./move.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrapper{
position: relative;
margin: 100px auto 0;
width: 400px;
height: 250px;
/* border: 1px solid #000; */
overflow: hidden;
}
.wrapper .sliderPage{
position: absolute;
left: 0;
top: 0;
height: 250px;
width: 2000px;
}
.wrapper .sliderPage li{
width: 400px;
height: 250px;
float: left;
}
.wrapper .sliderPage li img{
width: 100%;
height: 100%;
}
.wrapper .btn{
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
opacity: 0.1;
cursor: pointer;
}
.wrapper .btn:hover{
opacity: 0.7;
}
.wrapper .left-btn{
left: 15px;
}
.wrapper .right-btn{
right: 15px;
}
.wrapper .sliderIndex{
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
cursor: pointer;
}
.wrapper .sliderIndex span{
display: inline-block;
width: 8px;
height: 8px;
background-color: #ccc;
border-radius: 50%;
margin-right: 10px;
}
.wrapper .sliderIndex .active{
background-color: #f40;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="sliderPage">
<li>
<img src="./img/七天入门国画.jpg" alt="">
</li>
<li>
<img src="./img/初识画板.jpg" alt="">
</li>
<li>
<img src="./img/彩铅入门-萌宠绘.jpg" alt="">
</li>
<li>
<img src="./img/花里胡哨的艺术拼贴.jpg" alt="">
</li>
<li>
<img src="./img/七天入门国画.jpg" alt="">
</li>
</ul>
<div class="btn left-btn"> < </div>
<div class="btn right-btn"> > </div>
<div class="sliderIndex">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var timer = null;
var sliderPage = document.getElementsByClassName('sliderPage')[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length -1;
var leftBtn = document.getElementsByClassName('left-btn')[0];
var rightBtn = document.getElementsByClassName('right-btn')[0];
var lock = true;
var index = 0;
var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
//dirction
//默认方向/点击right按钮 'left->right ' 或者 undefined 什么都不传
// 点击left按钮 'right->left'
function autoMove(dirction) {
//默认方向,从左向右轮播
if(lock) {
lock = false;
clearTimeout(timer); //解决定时器争抢
if(!dirction || dirction == 'left->right') {
index++;
startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () {
if(sliderPage.offsetLeft == -num * moveWidth) {
index = 0;
sliderPage.style.left = '0px';
}
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
});
}else if(dirction == 'right->left') {
if(sliderPage.offsetLeft == 0) { //判断,点击时的位置是否为0;
sliderPage.style.left = -num * moveWidth + 'px';
index = num;
}
index--;
startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
})
}
}
}
leftBtn.onclick = function () {
autoMove('right->left');
}
rightBtn.onclick = function () {
autoMove('left->right');
}
function changeIndex(_index) {
for(var i = 0; i < oSpanArray.length; i++) {
oSpanArray[i].className = '';
}
oSpanArray[_index].className = 'active';
}
for(var i = 0; i < oSpanArray.length; i++) {
(function (myIndex) {
oSpanArray[i].onclick = function () {
console.log(myIndex);
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {left: -index * moveWidth}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
});
}
})(i)
}
timer = setTimeout(autoMove, 1500)
</script>
</body>
</html>
轮播图生成器
HTMLDiv.Element.prototype.createturnPage = function ([‘./01.jpg’,/02.jpg]) {}
oDiv.createturn([]);