<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 400px;
height: 200px;
margin: 200px auto;
overflow: hidden;
position:relative;
}
.box1{
width: 80000px;
margin-left: -400px;
transition: all 1s;
}
img{
width: 400px;
height: 200px;
display: block;
float: left;
}
.left,.right{
position: absolute;
background-color: darkgrey;
opacity: 0.5;
width: 20px;
height: 50px;
border-radius: 5px;
line-height: 50px;
text-align: center;
font-size: 20px;
top:75px;
cursor: default;
}
.right{
right: 0;
}
ul{
position: absolute;
top: 150px;
left: 100px;
}
li{
list-style: none;
width: 20px;
height: 20px;
background-color: gainsboro;
border-radius: 50%;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">
</div>
<div class="left"><</div>
<div class="right">></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
var wrap=document.getElementsByClassName("wrap");
var boxs=document.getElementsByClassName("box1");
var left=document.querySelector(".left");
var right=document.querySelector(".right");
var lis=document.querySelectorAll("li");
var timer=null;
var a=-400;
var b=0;
lis[0].style.backgroundColor="yellow";
function timefn () {
clearInterval(timer);
timer = setInterval(function () {
a=a-400;
boxs[0].style.transition=1+"s";
if(a == -2000){
setTimeout(function(){
a = -400;
boxs[0].style.transition="0s all";
boxs[0].style.marginLeft =a+"px";
}, 1000);
}
boxs[0].style.marginLeft =a+"px";
b=a/-400-1;
if(b==4){
b=0;
}
for(var i=0;i<4;i++){
lis[i].style.backgroundColor="gainsboro"
}
lis[b].style.backgroundColor="yellow";
},2000)
}
timefn();
left.onclick = function () {
a=a+400;
boxs[0].style.transition=1+"s";
if(a==0){
setTimeout(function(){
a = -1600;
boxs[0].style.transition="0s all";
boxs[0].style.marginLeft =a+"px";
},900);
}
boxs[0].style.marginLeft =a+"px";
timefn();
for(var i=0;i<4;i++){
lis[i].style.backgroundColor="gainsboro"
}
// b-=1;
// if(b<0){
// b=3;
// }
b=a/-400-1;
if(b==-1){
b=3;
}
console.log(a);
console.log(b);
lis[b].style.backgroundColor="yellow";
}
right.onclick = function () {
a=a-400;
boxs[0].style.transition=1+"s";
if(a==-2000){
setTimeout(function(){
a = -400;
boxs[0].style.transition="0s all";
boxs[0].style.marginLeft =a+"px";
},900);
}
boxs[0].style.marginLeft =a+"px";
timefn();
for(var i=0;i<4;i++){
lis[i].style.backgroundColor="gainsboro"
}
// b+=1;
// if(b>3){
// b=0;
// }
b=a/-400-1;
if(b==4){
b=0;
}
lis[b].style.backgroundColor="yellow";
}
for(var j=0;j<4;j++){
lis[j].index=j;
lis[j].onclick = function () {
for(var k=0;k<4;k++){
lis[k].style.backgroundColor="gainsboro"
}
this.style.backgroundColor="yellow";
clearInterval(timer);
a=(this.index+1)*-400
boxs[0].style.transition=1+"s";
boxs[0].style.marginLeft =a+"px";
timefn();
}
}
// wrap[0].onmouseover = function () {
// clearInterval(timer);
// }
// wrap[0].onmouseout = function () {
// timefn();
// }
</script>
</html>
网友评论