<style> #demo { overflow:hidden; border: 1px dashed #d8edff; width: 900px; height:132px; } #demo img { border: 2px solid #d8edff; } #demo1 a { float:left; margin:10px; cursor:default; } #demo2 a { float:left; margin:10px; } #indemo { width: 800%; } </style> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="img/hydra_index_pic1.png" border="0" /></a> <a href="#"><img src="img/hydra_index_pic2.png" border="0" /></a> <a href="#"><img src="img/hydra_index_pic3.png" border="0" /></a> <a href="#"><img src="img/hydra_index_pic4.png" border="0" /></a> <a href="#"><img src="img/hydra_index_pic5.png" border="0" /></a> <a href="#"><img src="img/hydra_index_pic6.png" border="0" /></a> </div> <div id="demo2"></div> </div> </div> </div> <script> //使用div时,请保证demo2与demo1是在同一行上. var speed=30//速度数值越大速度越慢 var tab2=document.getElementById("demo2"); var tab1=document.getElementById("demo1"); var tab=document.getElementById("demo"); tab2.innerHTML=tab1.innerHTML function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0)//offsetWidth 是对象的可见宽度 tab.scrollLeft-=tab1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度 else{ tab.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) tab.onmouseover=function() {clearInterval(MyMar)} tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
今天发现我写的图片滚动代码有问题,图片虽然能循环滚动,但不是连续的,上网查了才发现是因为demo1和demo2都使用了浮动,使它们不在同一行上。取消浮动后,图片播放第二遍时显示不在同一行上,解决方法
#demo2 a { float:left; margin:10px; }
时间: 2024-11-05 23:30:00