javascript-图片横向无缝隙滚动

浏览数：13 / 时间：2015年06月08日

 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>