<!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> <table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="200"> <div id="myshell"> <div id="apDiv1" onclick="javascript:leftgundong()"></div> <div id="apDiv2" onclick="javascript:rightgundong()"></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> </td> </tr> </table> <div id="info"></div> <div id="info2"></div> <script language="javascript"> var speed=1; var picwid=200; var pictotal=1200; var i=0; tag=document.getElementById("mydiv"); //var mar function leftgundong(){ if(picwid>0) { tag.scrollLeft=tag.scrollLeft+5; info2.innerHTML=tag.scrollLeft; picwid=picwid-5; setTimeout(leftgundong,speed); } else { // clearInterval(mar) picwid=200; } info.innerHTML='picwid'+picwid+'scrollLeft:'+tag.scrollLeft; } function rightgundong(){ if(picwid>0) { tag.scrollLeft=tag.scrollLeft-5; info2.innerHTML=tag.scrollLeft; picwid=picwid-5; setTimeout(rightgundong,speed); } else { // clearInterval(mar) picwid=200; } info.innerHTML='picwid'+picwid+'scrollLeft:'+tag.scrollLeft; } </script> </body> </html>
小白自制的翻页滚动幻灯片代码
父层overflow:hidden后通过scrollLeft控制横向滚动，但注意子层#mydiv1 一定要设宽度 ,试过不设不生效。
按钮要坐在 mydiv的平行级，而不是子级，原因是做到子层的话会随滚动跑。
相当于一个外壳层套 按钮和滚动条。 滚动条里套要滚动的长内容层。
setTimeout 是一次只执行一次，靠嵌套实现循环。 setInterval是不断循环
滚动速度受speed和
tag.scrollLeft=tag.scrollLeft+5;
info2.innerHTML=tag.scrollLeft;
picwid=picwid-5;
里面两个位置的5来控制。 picwid就是用来记录一次最多滚多远，停在不同图片上。