<!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 type="text/css"> #datu { width:1000px; height:500px; 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> </head> <body> <div id="datu" onmouseover="Zhi()" onmouseout="Li()" onclick="Chang()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td><img src="image/datu1-lhd-1-2880x1480.jpg" width="1000" /></td> <td><img src="image/datu2-rx-1-2880x1480.jpg" width="1000"/></td> <td><img src="image/datu3-carousel-1-2880x1480.jpg" width="1000" /></td> <td><img src="image/datu4-kv-16-2880x1480.jpg" width="1000"/></td> <td><img src="image/datu5-overview-kv-1-2880x1480.jpg" width="1000" /></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>-4000) { document.getElementById("ta").style.left=(ta-1000)+"px"; ta=ta-1000; } 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+1000)+"px"; ta=ta+1000; } else { document.getElementById("ta").style.left="-4000px"; } } function you() { var ta = parseInt(document.getElementById("ta").style.left); if(ta>-4000) { document.getElementById("ta").style.left=(ta-1000)+"px"; ta=ta-1000; } else { document.getElementById("ta").style.left="0px"; } } </script>