<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link href="reset.css" type="text/css" rel="stylesheet"> <script src="picture.js" type="text/javascript"></script></head><body><div id="container"> <div id="list" style="left: -600px;"> <img src="images/5.jpg" alt="5"> <img src="images/1.jpg" alt="1"> <img src="images/2.jpg" alt="2"> <img src="images/3.jpg" alt="3"> <img src="images/4.jpg" alt="4"> <img src="images/5.jpg" alt="5"> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:" id="prev" class="arrow"><</a> <a href="javascript:" id="next" class="arrow">></a></div></body></html>/** * Created by vsus-pc on 2017/7/1. */window.onload=function(){ var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('buttons').getElementsByTagName('span'); var prev=document.getElementById('prev'); var next=document.getElementById('next'); var index=1; function showButton(){ for(var i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } } buttons[index-1].className='on'; } function animate(offset){ var newLeft=parseInt(list.style.left)+offset; list.style.left=newLeft+'px'; if(newLeft>0){ list.style.left=-2400+'px'; } if(newLeft<-3000){ list.style.left=-600+'px'; } } prev.onclick=function(){ if(index==1){ index=5; } else{ index-=1; } showButton(); animate(600); }; next.onclick=function(){ if(index==5){ index=1; } else{ index+=1; } showButton(); animate(-600); }; for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=='on'){ return; } var myIndex=parseInt(this.getAttribute(index)); var offset=-600*(myIndex-index); animate(offset); index=myIndex; showButton(); debugger; } }};
添加回答
举报
0/150
提交
取消