<!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"> <!-- #myshell{ width:200px; height: 200px; position:relative; } #mydiv { height: 200px; width: 200px; overflow:hidden; } #mydiv1 { height: 200px; float:left; width: 1200px; } #mydiv2 { height: 200px; float:left; } img{ margin:0px; padding:0px; display:block; float:left; } #apDiv1 { position:absolute; width:15px; height:15px; z-index:1; background-color: #FFFFFF; top: 80px; left: 10px; } #apDiv2 { position:absolute; width:15px; height:15px; z-index:1; background-color: #FFFFFF; top: 80px; left:170px; } --> </style> </head> <body onload="beginauto()"> <table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="200"> <div id="myshell"> <div id="apDiv1" onclick="javascript:allowleftgundong()"></div> <div id="apDiv2" onclick="javascript:allowrightgundong()"></div> <div id="mydiv"> <div id="mydiv1"> <a href="#"><img src="1.jpg" width="200" height="200" border="0" /></a> <a href="#"><img src="2.jpg" width="200" height="200" border="0" /></a> <a href="#"><img src="3.jpg" width="200" height="200" border="0" /></a> <a href="#"><img src="4.jpg" width="200" height="200" border="0" /></a> <a href="#"><img src="5.jpg" width="200" height="200" border="0" /></a> <a href="#"><img src="6.jpg" width="200" height="200" border="0" /></a> </div> </div> </div> <script language="javascript"> var speed=1; var picwid=200; var pictotal=1200; var i=0; var mar; function leftgundong(){ i=1; if(picwid>0) { mydiv.scrollLeft=mydiv.scrollLeft+5; info2.innerHTML=mydiv.scrollLeft; picwid=picwid-5; setTimeout(leftgundong,speed); } else { // clearInterval(mar) picwid=200; i=0; } info.innerHTML='picwid'+picwid+'scrollLeft:'+mydiv.scrollLeft; } function rightgundong(){ i=1; if(picwid>0) { mydiv.scrollLeft=mydiv.scrollLeft-5; info2.innerHTML=mydiv.scrollLeft; picwid=picwid-5; setTimeout(rightgundong,speed); } else { // clearInterval(mar) picwid=200; i=0; } info.innerHTML='picwid'+picwid+'scrollLeft:'+mydiv.scrollLeft; } function allowleftgundong() { if(i==0) leftgundong(); } function allowrightgundong() { if(i==0) rightgundong(); } function autogundong(){ if(i==0) { i=1; if(mydiv1.offsetWidth-mydiv.scrollLeft>200) { info3.interHTML=mydiv1.offsetWidth; leftgundong(); } else { mydiv.scrollLeft=0; } i=0; } } function beginauto() { mar=setInterval(autogundong,5000); } </script> </td> </tr> </table> <div id="info"></div> <div id="info2"></div> <div id="info3"></div> </body> </html>
其中 i 用来控制 手动和自动之间的冲突，自动半截又手动容易让图片位置错乱。所以i=0表示资源未被占用， 为1则为占用，不允许另一个运动操作