dede(织梦)无缝滚动带标题图片

发表时间:2012-02-29 19:39:03

 自己贴出来，以后直接复制就好了。

HTML代码：

 

  1. <div id="demo"> 
  2.               <div id="indemo"> 
  3.               <div id="demo1"> 
  4.                 {dede:arclist row=10 titlelen=24 typeid='2'} 
  5.                 <a href="[field:arcurl/]"><img src="[field:litpic/]" height="122" width="162"/><p>[field:title/]</p></a> 
  6.                 {/dede:arclist}  
  7.               </div> 
  8.              <div id="demo2"></div> 
  9.              </div> 
  10.           </div> 
  11.              <script> 
  12. <!-- 
  13. var speed=10; //数字越大速度越慢 
  14. var tab=document.getElementById("demo"); 
  15. var tab1=document.getElementById("demo1"); 
  16. var tab2=document.getElementById("demo2"); 
  17. tab2.innerHTML=tab1.innerHTML; 
  18. function Marquee(){ 
  19. if(tab2.offsetWidth-tab.scrollLeft<=0) 
  20. tab.scrollLeft-=tab1.offsetWidth 
  21. else{ 
  22. tab.scrollLeft++; 
  23. } 
  24. } 
  25. var MyMar=setInterval(Marquee,speed); 
  26. tab.onmouseover=function() {clearInterval(MyMar)}; 
  27. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
  28. --> 
  29. </script> 

CSS代码：

 

  1. #demo { 
  2. background: #FFF; 
  3. overflow:hidden; 
  4. width: 97%; 
  5. margin:20px auto 5px auto; 
  6. } 
  7. #demo a {float:left;} 
  8. #demo img { 
  9. padding:1px; 
  10. border:1px #999999 solid; 
  11. margin:0 10px; 
  12. } 
  13. #demo p {text-align:center; line-height:30px;} 
  14. #indemo { 
  15. float: left; 
  16. width: 800%; 
  17. } 
  18. #demo1 { 
  19. float: left; 
  20. } 
  21. #demo2 { 
  22. float: left; 
  23. } 

 

------分割线---------------------------------------

您可能感兴趣

Tags: dede 织梦 无缝滚动 图片

留个脚印

点击我更换图片 (请输入验证码)

最新评论