JS 文字/图片无缝滚动

本文以文字滚动为例，展示代码；
要做图片滚动的朋友，直接在li标签中将文字替换成图片调试至合适高度即可，也可以参考下一篇JS实现图片幻灯片效果，不同的方法哦：

---

完整代码如下

css 代码

<style type="text/css">
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
ul,li{list-style:none;}
a{ text-decoration:none; color:#333;}
 #demo{
    overflow:hidden; /*溢出的部分不显示*/
    width:290px;
    height:165px;/*高度数值要确切，避免demo1与demo2之间的距离过大或重叠*/
    padding:5px;
    margin:50px auto;
    background:#ccc;
    }
#express li{
      list-style:none;
      font-size:15px;
      height:35px;
      cursor:pointer;
      text-align: center
      }
</style>

html 代码

<div id="demo">
<!-- 一个盒子里面包着两个一样的div，随后用js将demo1内容复制给demo2，其实用html直接在demo2里面添加ul、li效果也一样，但它占地方啊，对吧-->
    <div id="demo1">
        <ul id="express">
            <li>文字无缝滚动第一条</li>
            <li>文字无缝滚动第二条</li>
            <li>文字无缝滚动第三条</li>
            <li>文字无缝滚动第四条</li>
            <li>文字无缝滚动第五条</li>
        </ul>
    </div>
    <div id="demo2"></div>
<!-- 两个交替展示，形成内容循环。 -->
</div>

javascript 代码

<script type="text/javascript">
  //获取三个demo的元素对象，并把id=demo1的内容赋值给id=demo2
  var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  demo2.innerHTML=demo1.innerHTML;
  //给demo1,demo2加相同的高度
  demo1.style.height=demo.offsetHeight+"px";
  demo2.style.height=demo.offsetHeight+"px";

  //定义向上滚动函数
  function scrollup()
  {
    //如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
    if(demo.scrollTop>=demo.offsetHeight)
    {
      demo.scrollTop=0;
    }else
    {
      demo.scrollTop++;
    }
  }

  //setInterval()计时器，功能是从载入页面后每隔指定的时间执行一次代码
  //30为毫秒数，数值越小滚动越快
  var t=window.setInterval("scrollup()",30);
</script>

附加功能 鼠标悬停

 //鼠标悬停，鼠标离开继续滚动
  demo.onmouseover=function(){
                 //取消计时器
                 clearInterval(t);
                 }
   demo.onmouseout=function(){
                 //添加计时器
                 t=window.setInterval("scrollup()",30);
                 }