<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #datu { width:800px; height:500px; position:relative; margin:20px auto; border:2px solid red; overflow:hidden;} #ta { position:relative; left:0px; top:0px; transition:0.7s;} #suo { width:520px; height:70px; position:relative; margin:20px auto; border:2px solid blue; line-height:70px;} .suo { width:90px; height:50px; position:relative; border:1px solid yellow; float:left; margin-left:10px; margin-top:10px;} </style> </head> <body> <div id="datu" onmouseover="Zhi()" onmouseout="Li()" > <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td><img src="images/1.jpg" width="800" /></td> <td><img src="images/2.jpg" width="800" /></td> <td><img src="images/3.jpg" width="800" /></td> <td><img src="images/4.jpg" width="800" /></td> <td><img src="images/5.jpg" width="800" /></td> </tr> </table> </div> <div id="suo" onmouseover="Zhi()" onmouseout="Li()"> <div class="suo" biao="1"><img src="images/1.jpg" width="90" height="50" /></div> <div class="suo" biao="2"><img src="images/2.jpg" width="90" height="50" /></div> <div class="suo" biao="3"><img src="images/3.jpg" width="90" height="50" /></div> <div class="suo" biao="4"><img src="images/4.jpg" width="90" height="50" /></div> <div class="suo" biao="5"><img src="images/5.jpg" width="90" height="50" /></div> </div> </body> </html> <script> document.getElementById("ta").style.left="0px"; document.getElementsByClassName("suo").item(0).style.borderColor="red"; var biaosuo=1; var suo=document.getElementsByClassName("suo"); for(var i=0;i<suo.length;i++) { suo.item(i).onclick=function(){ var biao = this.getAttribute("biao"); for(var i = 0;i<5;i++) { if(i==biao-1) { document.getElementsByClassName("suo").item(i).style.borderColor="red"; } else { document.getElementsByClassName("suo").item(i).style.borderColor="yellow"; } if(biao==1) { document.getElementById("ta").style.left="0px"; } else if(biao==2) { document.getElementById("ta").style.left="-800px"; } else if(biao==3) { document.getElementById("ta").style.left="-1600px"; } else if(biao==4) { document.getElementById("ta").style.left="-2400px"; } else { document.getElementById("ta").style.left="-3200px"; } } } } function Change() { var ta = parseInt(document.getElementById("ta").style.left); if(ta>-3200) { document.getElementById("ta").style.left=(ta-800)+"px"; ta=ta-800; if(ta==-800) { biaosuo=2; } else if(ta==-1600) { biaosuo=3; } else if(ta==-2400) { biaosuo=4; } else if(ta=-3200) { biaosuo=5; } } else { document.getElementById("ta").style.left="0px"; biaosuo=1; } for(var i = 0;i<5;i++) { if(i==biaosuo-1) { document.getElementsByClassName("suo").item(i).style.borderColor="red"; } else { document.getElementsByClassName("suo").item(i).style.borderColor="yellow"; } } shi=window.setTimeout("Change()",3000); } var shi =window.setTimeout("Change()",3000); function Zhi() { window.clearTimeout(shi); } function Li() { shi=window.setTimeout("Change()",1000); } </script>