javascript-图片横向无缝隙滚动
1 <style type="text/css"> 2 <!-- 3 ul,li,div{margin:0; padding:0; font-size:12px;} 4 #demo { 5 width:678px; float:right; overflow:hidden;height:144px; border:none; 6 } 7 #indemo { 8 float: left; 9 width: 800%; 10 } 11 #demo1,#demo2{height:144px;float:left; display:inline-table;} 12 #demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; } 13 #demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;} 14 #demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;} 15 #demo1 { 16 float: left; 17 } 18 #demo2 { 19 float: left; 20 } 21 --> 22 </style> 23 <div id="demo"> 24 <div id="indemo"> 25 <div id="demo1"> 26 <ul> 27 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 28 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 29 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 30 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 31 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 32 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 33 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 34 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 35 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 36 <li><a href="#"><img src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li> 37 </ul> 38 </div> 39 <div id="demo2"></div> 40 </div> 41 </div> 42 <script> 43 <!-- 44 var speed=20; //数字越大速度越慢 45 var tab=document.getElementById("demo"); 46 var tab1=document.getElementById("demo1"); 47 var tab2=document.getElementById("demo2"); 48 tab2.innerHTML=tab1.innerHTML; 49 function Marquee(){ 50 if(tab2.offsetWidth-tab.scrollLeft<=0) 51 tab.scrollLeft-=tab1.offsetWidth 52 else{ 53 tab.scrollLeft++; 54 } 55 } 56 var MyMar=setInterval(Marquee,speed); 57 tab.onmouseover=function() {clearInterval(MyMar)}; 58 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 59 --> 60 </script></td> 61 </tr> 62 </table>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。