怎么在织梦模板添加从左向右滚动的代码

天外飘仙

一般很多的网站特别是企业网站都有一个从左到右的滚动功能。

  下面是我从网上找来的，一般网上的都有错误，我把错误修改掉后，分享给大家。
   如果您网站需要这样一个从左到右的滚动，可以使用这段代码，保证能用。

css样式，可以放在头部head标签里面：

1. <style type="text/css">
   
2. 
   
3. #demo {
   
4. background: #FFF;
   
5. overflow:hidden;
   
6. border: 1px dashed #CCC;
   
7. width: 500px;
   
8. }
   
9. #demo img {
   
10. border: 3px solid #F2F2F2;
    
11. }
    
12. #indemo {
    
13. float: left;
    
14. width: 800%;
    
15. }
    
16. #demo1 {
    
17. float: left;
    
18. }
    
19. #demo2 {
    
20. float: left;
    
21. }
    
22. 
    
23. </style>

复制代码

滚动的图片代码：

向左滚动

1. <div id="demo">
   
2. <div id="indemo">
   
3. <div id="demo1">
   
4. 
   
5. 
   
6. <img src="/[url=http://bbs.piaoxian.net/forum-23-1.html]dedecms[/url]/style/img/img1.png" alt="" />
   
7. <img src="/dedecms/style/img/img2.png" alt="" />
   
8. 
   
9.     <a href="">
   
10. <img src="/dedecms/style/img/1.png" alt=""/>
    
11. </a>
    
12.     <a href="">
    
13. <img src="/dedecms/style/img/2.png" alt=""/>
    
14. </a>
    
15.     <a href="">
    
16. <img src="/dedecms/style/img/3.png" alt=""/>
    
17. </a>
    
18.     <a href="">
    
19. <img src="/dedecms/style/img/4.png" alt=""/>
    
20. </a>
    
21. </div>
    
22. <div id="demo2"></div>
    
23. </div>
    
24. </div>
    

复制代码

js代码，主要是这段代码的作用：

1. <script>
   
2. 
   
3. var speed=10; //数字越大速度越慢
   
4. var tab=document.getElementById("demo");
   
5. var tab1=document.getElementById("demo1");
   
6. var tab2=document.getElementById("demo2");
   
7. tab2.innerHTML=tab1.innerHTML;
   
8. function Marquee(){
   
9. if(tab2.offsetWidth-tab.scrollLeft<=0)
   
10. tab.scrollLeft-=tab1.offsetWidth
    
11. else{
    
12. tab.scrollLeft++;
    
13. }
    
14. }
    
15. var MyMar=setInterval(Marquee,speed);
    
16. tab.onmouseover=function() {clearInterval(MyMar)};
    
17. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    
18. 
    
19. </script>
    

复制代码