<style type="text/css"> #datu { width:500px; height:400px; position:relative; margin:auto; top:100px; border:2px solid #309; overflow:hidden; } #xiao { width:50px; height:100px; position:absolute; left:0px; top:200px; z-index:5; text-align:center; line-height:100px; font-size:100px; cursor:pointer; } #xiao1 { width:50px; height:100px; position:absolute; right:0px; top:200px; z-index:5; text-align:center; line-height:100px; font-size:100px; cursor:pointer; } #ta { position:relative; left:0px; top:0px; transition:0.7s;} </style> <body> <div id="datu" onmouseover="Zhi()" onmouseout="Li()" onclick="Chang()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="400"> <td width="500px"><img src="../Documents/未命名站点 2/1.jpg" width="500" /></td> <td><img src="../Documents/未命名站点 2/2.jpg" height="400" width="500"/></td> <td><img src="../Documents/未命名站点 2/3.jpg" height="400" width="500"/></td> <td><img src="../Documents/未命名站点 2/5.jpg" height="400" width="500"/></td> <td><img src="../Documents/未命名站点 2/800.jpg" height="400" width="500"/></td> <div id="xiao" onclick="zuo()">«</div> <div id="xiao1" onclick="you()">»</div> </tr> </table> </div> </body> </html> <script> document.getElementById("ta").style.left="0px"; function Change() { var ta = parseInt(document.getElementById("ta").style.left); if(ta>-2000) { document.getElementById("ta").style.left=(ta-500)+"px"; ta=ta-500; } else { document.getElementById("ta").style.left="0px"; } shi=window.setTimeout("Change()",3000); } var shi =window.setTimeout("Change()",3000); function Zhi() { window.clearTimeout(shi); } function Li() { shi=window.setTimeout("Change()",1000); } function zuo() { var ta = parseInt(document.getElementById("ta").style.left); if(ta<0) { document.getElementById("ta").style.left=(ta+500)+"px"; ta=ta+500; } else { document.getElementById("ta").style.left="-2000px"; } } function you() { var ta = parseInt(document.getElementById("ta").style.left); if(ta>-2000) { document.getElementById("ta").style.left=(ta-500)+"px"; ta=ta-500; } else { document.getElementById("ta").style.left="0px"; } } </script>
