图片列表 左右滚动

Submitted by 一粒沙 on 2008-05-30, 10:48 AM. web开发

XML/HTML代码
  1. <div class="roll_pic">  
  2. <div class="roll_pic_Logo"><img src="http://icon.cnmo.com/tu/m1.jpg" /></div>  
  3. <DIV id=demo   style="FLOAT: none; OVERFLOW: hidden; WIDTH: 830px; HEIGHT: 150px">  
  4. <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>  
  5. <TBODY>  
  6. <TR>  
  7. <TD id=demo1>  
  8. <div class="roll_roll" style="width:1180px">  
  9.   
  10.        <div class="hP">  
  11.             <div class="hPC">  
  12.                 <a href="http://tu.cnmo.com/3965_1.html"><img src="http://imgm.cnmo.com/20_module_images/1782.jpg" width="140" height="105"/></a>  
  13.                 <div class="hPCT"><a href="http://tu.cnmo.com/3965_1.html">时尚手表手机V2</a></div>  
  14.             </div>  
  15.         </div>  
  16.         <div class="hP">  
  17.             <div class="hPC">  
  18.                 <a href="http://tu.cnmo.com/4057_1.html"><img src="http://imgm.cnmo.com/20_module_images/1804.jpg" width="140" height="105"/></a>  
  19.                 <div class="hPCT"><a href="http://tu.cnmo.com/4057_1.html">KM380对比W350</a></div>  
  20.             </div>  
  21.         </div>  
  22.        <div class="hP">  
  23.             <div class="hPC">  
  24.                 <a href="http://tu.cnmo.com/4065_1.html"><img src="http://imgm.cnmo.com/20_module_images/1806.jpg" width="140" height="105"/></a>  
  25.                 <div class="hPCT"><a href="http://tu.cnmo.com/4065_1.html">夏普 WILLCOM 03</a></div>  
  26.             </div>  
  27.         </div>  
  28.   
  29.        <div class="hP">  
  30.             <div class="hPC">  
  31.                 <a href="http://tu.cnmo.com/3955_1.html"><img src="http://imgm.cnmo.com/20_module_images/1776.jpg" width="140" height="105"/></a>  
  32.                 <div class="hPCT"><a href="http://tu.cnmo.com/3955_1.html">LG KM380酷绚图赏</a></div>  
  33.             </div>  
  34.         </div>  
  35.        <div class="hP">  
  36.             <div class="hPC">  
  37.                 <a href="http://tu.cnmo.com/3955_1.html"><img src="http://imgm.cnmo.com/20_module_images/1776.jpg" width="140" height="105"/></a>  
  38.                 <div class="hPCT"><a href="http://tu.cnmo.com/3955_1.html">LG KM380酷绚图赏</a></div>  
  39.             </div>  
  40.         </div>  
  41.         <div class="hP">  
  42.             <div class="hPC">  
  43.                 <a href="http://tu.cnmo.com/3955_1.html"><img src="http://imgm.cnmo.com/20_module_images/1776.jpg" width="140" height="105"/></a>  
  44.                 <div class="hPCT"><a href="http://tu.cnmo.com/3955_1.html">LG KM380酷绚图赏</a></div>  
  45.             </div>  
  46.         </div>  
  47.         <div class="hP">  
  48.             <div class="hPC">  
  49.                 <a href="http://tu.cnmo.com/3955_1.html"><img src="http://imgm.cnmo.com/20_module_images/1776.jpg" width="140" height="105"/></a>  
  50.                 <div class="hPCT"><a href="http://tu.cnmo.com/3955_1.html">LG KM380酷绚图赏</a></div>  
  51.             </div>  
  52.         </div>  
  53.         <div class="hP">  
  54.             <div class="hPC">  
  55.                 <a href="http://tu.cnmo.com/3955_1.html"><img src="http://imgm.cnmo.com/20_module_images/1776.jpg" width="140" height="105"/></a>  
  56.                 <div class="hPCT"><a href="http://tu.cnmo.com/3955_1.html">LG KM380酷绚图赏</a></div>  
  57.             </div>  
  58.         </div>  
  59.   
  60. </div>  
  61. </TD>  
  62. <TD id=demo2></TD></TR></TBODY></TABLE></DIV>  
  63. </div>  
  64. <SCRIPT language=javascript>  
  65. var speed=2;   
  66. document.getElementById('demo2').innerHTML=document.getElementById('demo1').innerHTML;   
  67. function Marquee(){   
  68. if(document.getElementById('demo2').offsetWidth-document.getElementById('demo').scrollLeft<=0)   
  69.         document.getElementById('demo').scrollLeft-=document.getElementById('demo1').offsetWidth;   
  70. else{   
  71. document.getElementById('demo').scrollLeft++;   
  72. }}   
  73. var MyMar=setInterval(Marquee,speed);   
  74. document.getElementById('demo').onmouseover=function() {   
  75. clearInterval(MyMar);   
  76. }   
  77. document.getElementById('demo').onmouseout=function() {   
  78. MyMar=setInterval(Marquee,speed);   
  79. }</SCRIPT>  

只要改下 CSS classname 还有width height

等就好了

几个示例网站

http://tu.cnmo.com/

http://bbs.cnmo.com/

http://www.pconline.com.cn/coolshow/new/mobile/0804/1269236.html

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):