<!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>
<style>
*{
margin:0;
padding:0;
}
ol,li{list-style: none;}
.show{
width:600px;
height:300px;
background:yellow;
margin:100px auto;
position:relative;overflow: hidden;
}
.box{
height:300px;
position:absolute;
}
.box img{
width:600px;
height:300px;
float:left;
}
span{
width:30px;
height:60px;
position:absolute;
top:130px;
text-align:center;
line-height:60px;
font-weight:900;
font-size:24px;
cursor: pointer;
}
span:nth-of-type(1){
left:10px;
}
span:nth-of-type(2){
right:10px;
}
.radiusBox{
width:100%;
height:20px;
position:absolute;
bottom:10px;
display:flex;
justify-content: center;
}
li{
width:20px;
height:20px;
border-radius:10px;
background:#ccc;
margin:0 5px;
cursor: pointer;
}
.active{
background:red;
}
</style>
</head>
<body>
<section class = "show">
<div class = "box">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
<ol class = "radiusBox">
</ol>
</section>
</body>
</html>
<script src = "../move.js"></script> //运动
<script>
function mover(){
this.oShow = document.querySelector(".show");
this.oBox = document.querySelector(".box");
this.oImg = document.getElementsByTagName("img");
this.span = document.querySelectorAll("span");
this.distance = this.oImg[0].offsetWidth;
this.count = 0;
this.cloneFirst = this.oImg[0].cloneNode();
this.oBox.appendChild(this.cloneFirst);
this.oRadiusBox = document.querySelector(".radiusBox");
this.a = document.createDocumentFragment();
this.init();
}
mover.prototype = {
init:function(){
this.oBox.style.width=this.oImg.length*this.distance + "px";
this.bindEvent();
this.timer();
this.add();
},
toImg:function(){
move(this.oBox,{"left":-this.distance*this.count});
},
//下一张图片
nextImg:function(){
_this = this;
if(this.count>=this.oImg.length-1){
this.oBox.style.left = 0;
this.count = 1;
}else{
this.count++
}
//控制圆点样式
_this.clearActive();
this.oRadius[this.count>=this.oImg.length - 1?0:this.count].className = "active";
},
//定时器
timer : function(){
_this = this
timer = setInterval(function(){
_this.nextImg();
_this.toImg();
},1000)
},
//上一张图片
preImg:function(){
_this = this;
if(this.count<=0){
this.oBox.style.left = - (this.oImg.length - 1)*this.distance + "px";
this.count = this.oImg.length -2;
}else{
this.count--;
}
_this.clearActive();
this.oRadius[this.count].className = "active";
},
bindEvent:function(){
var _this =this;
this.span[1].onclick=function(){
_this.nextImg();
_this.toImg();
}
this.span[0].onclick = function(){
_this.preImg()
_this.toImg();
}
this.oShow.onmouseover = function(){
clearInterval(timer);
}
this.oShow.onmouseout = function(){
_this.timer();
}
},
//添加圆点
add:function(){
for(var i = 0;i < this.oImg.length - 1;i++){
var creatLi = document.createElement("li")
this.a.appendChild(creatLi);
}
this.oRadiusBox.appendChild(this.a);
this.oRadius = document.querySelectorAll(".radiusBox li");
this.oRadius[0].className = "active";
//添加事件
_this = this;
for(var k = 0 ; k < this.oRadius.length ; k++){
this.oRadius[k].index = k;
this.oRadius[k].onmouseover = function(){
_this.clearActive()
this.className = 'active';
_this.count = this.index;
_this.toImg()
}
}
},
//清除圆点样式
clearActive:function(){
for(var k = 0; k < this.oRadius.length; k++){
this.oRadius[k].className = "";
}
}
}
new mover();
</script>