教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js实现不间断滚动图片的代码

js实现不间断滚动图片的代码

发布时间:2014-12-09   编辑:jiaochengji.com
本文介绍下,用javascript代码实现不间断滚动图片的例子,有需要的朋友,参考下吧。

以下代码实现:
结构跟行为相分离,两者的联系只需要一个id,且同一个js代码可以在本页面多处使用,之间互不干扰。

具体看下面的代码吧。

1,xhtml部分
 

复制代码 代码示例:
<div class="demo" id="demo1">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td><ul>
          <li><img src="img.jpg"><br>
            滚动图1</li>
          <li><img src="img.jpg"><br>
            滚动图2</li>
          <li><img src="img.jpg"><br>
            滚动图3</li>
          <li><img src="img.jpg"><br>
            滚动图4</li>
        </ul></td>
    </tr>
  </table>
</div>
<!--第二个滚动图开始-->
<div class="demo" id="demo2">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td><ul>
          <li><img src="img.jpg"><br>
            滚动图1</li>
          <li><img src="img.jpg"><br>
            滚动图2</li>
          <li><img src="img.jpg"><br>
            滚动图3</li>
          <li><img src="img.jpg"><br>
            滚动图4</li>
        </ul></td>
    </tr>
  </table>
</div>

2,css部分
 

复制代码 代码示例:
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li{width:102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}

3,js部分
 

复制代码 代码示例:
function startmarquee(lh,speed,delay,index){
        var o=document.getElementById("demo"+index);
        var o_td=o.getElementsByTagName("td")[0];
        var str=o_td.innerHTML;
        var newtd=document.createElement("td");
            newtd.innerHTML=str;
            o_td.parentNode.appendChild(newtd);
        var t;
        var p=false;
      o.onmouseover=function(){p=true;}
      o.onmouseout=function() {p=false;}
      function start(){
        t=setInterval(Marquee,speed);
        if(!p){o.scrollLeft += 3;}
      }
      function Marquee(){
          if(o_td.offsetWidth-o.scrollLeft<=0)
          o.scrollLeft-=o_td.offsetWidth;
          else{
            if(o.scrollLeft%lh!=0){
                o.scrollLeft+= 3
                }else{clearInterval(t); setTimeout(start,delay);}
          }
      }
      setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//图片间停式滚动
startmarquee(102,30,1,2);//图片不间断滚动

测试:
在html文件加载完成,开始执行js代码,才能正常运行。
因此,记得将js放到div之后;图片滚动跟文字滚动实现原理上基本相同,有兴趣的朋友,可以研究下文字滚动效果的实现方法。

您可能感兴趣的文章:
Js 图片滚动的实现方法
Javascript实现图片上下左右滚动的代码
JS不间断向上滚动效果代码一例
js实现不间断滚动图片的代码
javascript实现无间断滚动的代码
jQuery循环滚动展示代码 可应用到文字和图片上
使用jquery插件实现图片延迟加载技术详细说明
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
基于jQuery的图片左右无缝滚动插件
jQuery 幻灯片插件(带缩略图功能)

[关闭]
~ ~