js 图片轮播
学了点dom,写个轮播练练手，这是本人大体写的样子，一些细节功能还待完善。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">
<div id="zuo"><</div>
<div id="you">></div>
<div class="pics" style="left: 0px;">
<img src="../img/001.jpg" />
<img src="../img/timg (1).jpg" />
<img src="../img/timg (2).jpg" />
<img src="../img/timg (3).jpg" />
<img src="../img/timg.jpg" />
</div>
</div>
<style>
#you{
font-size: 50px;color: white;position: absolute;
z-index:11;
top:130px;right:10px;
}
#zuo{font-size: 50px;color: white;position: absolute;
z-index: 11;
top:130px;lefe: 10px;
}
#you:hover,#zuo:hover{opacity: 0.5;cursor: pointer;}
*{margin: 0; padding: 0;}
#container{position: relative;border:8px solid red;
width: 300px;margin: 0 auto;
overflow: hidden;
height: 300px;border-radius: 6px;}
.pics{width: 1600px;height: 300px; position: absolute;}
.pics>img{ width: 300px;height: 300px;
display: inline-block;}
</style>
<script>
var container=document.getElementById("container");
var you=document.getElementById("you");
var zuo=document.getElementById("zuo");
var sss=document.getElementsByClassName("pics")[0];
you.addEventListener("click",next);
zuo.addEventListener("click",pre)
function pre(){
var ss=parseInt(sss.style.left);
var i=0;
if(ss==0){
i=1;
sss.style.left=-1200*i+"px";
}
if(ss==-1200){
i=3;
sss.style.left=-300*i+"px";
}
if(ss==-900){
i=2;
sss.style.left=-300*i+"px";
}
if(ss==-600){
i=1;
sss.style.left=-300*i+"px";
}
if(ss==-300){
i=0;
sss.style.left=-300*i+"px";
}
}
function next(){
var ss=parseInt(sss.style.left);
var i=0;
sss.style.left=-300*i+"px";
if(ss==0){
i=1;
sss.style.left=-300*i+"px";
}
if(ss==-300){
i=2;
sss.style.left=-300*i+"px";
}
if(ss==-600){
i=3;
sss.style.left=-300*i+"px";
}
if(ss==-900){
i=4;
sss.style.left=-300*i+"px";
}
}
function autoplay(){
lunbo=setInterval(next,2000);//没用var 声明
}
autoplay();
container.onmouseover=function(){ clearInterval(lunbo); } container.onmouseout=function(){
autoplay();
}
</script>
</body>
</html>
