<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding:0}#box1{width:400px;height:200px; position:relative;margin:50px auto; overflow:hidden;}#box1 ul{width:1600px;height:200px; position: absolute;top:0;left:0; -webkit-transition:1s all ease;}#box1 ul li{width:400px;height:200px; background:yellow; font-size:100px; color:#fff; float:left;}#box2{ text-align:center;}#box2 span{padding:20px; background:red; cursor:pointer; color:#FFF;}</style><script>window.onload=function(){var oBox1=document.getElementById('box1');var oUl=oBox1.children[0];var aLi=oUl.children;var aBtn=document.getElementsByTagName('span');//下一个var iNow=0;aBtn[1].onclick=function(){iNow ;if(iNow==aLi.length)iNow=0;var l=-iNow*400;oUl.style.left=l 'px';};//上一个aBtn[0].onclick=function(){iNow--;if(iNow==-1)iNow=aLi.length-1; //负一 最后一个 length-1;var l=-iNow*400;oUl.style.left=l 'px';};};</script></head><body><div id="box1"><ul> <li style="display:block"><img src="images/01.jpg"></li> <li><img src="images/02.jpg"></li> <li><img src="images/03.jpg"></li> <li><img src="images/04.jpg"></li> </ul></div><div id="box2"><span>上一张</span><span>下一张</span></div></body></html>
评论