js實現輪播效果(二)
阿新 • • 發佈：2018-12-07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin:0;padding:0;list-style: none}
#div1{width:780px;height:400px;position:absolute;left:50%;top:50%;
margin-left:-390px;margin-top:-200px;border:1px black solid; overflow: hidden;
}
#div1 .sMove{
height:358px;
position:absolute;
top:0;
left:0;
transition: 0.5s all ease;
}
#div1 .sMove div{
width:780px;
height:358px;
float:left;
}
#div1 .nav{
width:780px;
height:42px;
position: absolute;
left:0;
bottom:0;
background:#ccc;
}
#div1 .nav ul{
width:162px;
height:30px;
float:right;
position:relative;
margin-top:5px;
}
#div1 .nav ul li{
width:38px;
height:28px;
float:left;
border:1px #000 solid;
cursor: pointer;
margin-left:8px;
}
#div1 .nav ul div{
width:38px;
height:28px;
border:1px #39b5e7 solid;
position: absolute;
left:8px;
top:0;
cursor: pointer;
transition: 0.3s left ease;
}
#div1 .sLast ,#div1 .sPrav{
width:50px;
height:50px;
background:black;
position: absolute;
top:50%;
margin-top:-25px;
text-align:center;
font:20px/50px Arial;
color:#fff;
cursor: pointer;
}
#div1 .sLast{
left:0;
}
#div1 .sPrav{
right:0;
}
</style>
</head>
<body>
<div id="div1">
<div class="sMove">
<div style="background:yellow"></div>
<div style="background:blue"></div>
<div style="background:green"></div>
</div>
<div class="nav">
<ul>
<div></div>
<li style="background:yellow"></li>
<li style="background:blue"></li>
<li style="background:green"></li>
</ul>
</div>
<div class="sLast" id="left">左</div>
<div class="sPrav" id="right">右</div>
</div>
<script>
var allLi=document.querySelectorAll(".nav li");
var moveDiv=document.querySelector(".nav div");
var needDiv=document.querySelector(".sMove");
needDiv.style.width=needDiv.children[0].offsetWidth*needDiv.children.length+'px';
for(var i=0;i<allLi.length;i++){
allLi[i].index=i;
allLi[i].onmouseover=function(){
moveDiv.style.left=this.offsetLeft+'px';
needDiv.style.left=-this.index*needDiv.children[0].offsetWidth+'px';
needIndex=this.index;
}
}
var needIndex=0;
right.onclick=function(){
needIndex++;
if(needIndex==needDiv.children.length){
needIndex=0;
}
moveDiv.style.left=allLi[needIndex].offsetLeft+'px';
needDiv.style.left=-needIndex*needDiv.children[0].offsetWidth+'px';
};
left.onclick=function(){
needIndex--;
if(needIndex==-1){
needIndex=needDiv.children.length-1;
}
moveDiv.style.left=allLi[needIndex].offsetLeft+'px';
needDiv.style.left=-needIndex*needDiv.children[0].offsetWidth+'px';
};
right.onmousedown=function(){
return false;
}
left.onmousedown=function(){
return false;
}
</script>
</body>
</html>