一款经典的js文字无缝滚动代码

在学习前端开发时肯定会碰到类似无缝滚动的效果，所以自己用js写了一个无缝滚动的函数方便在后面使用。
下面就举例说一下在项目中的应用:
首先页面布局代码如下：

                                
<div class="ulScollerContent" id="scollerBox">
    <ul class="picUl" id="picUl">
     <li class="picLi">
      <a href="###">
       <img class="schoolPic" src="images/school1.png" width="174" height="160"/>
       <p class="schoolPicText">校园一角</p>
      </a>
     </li>
     <li class="picLi">
      <a href="###">
       <img class="schoolPic" src="images/school1.png" width="174" height="160"/>
       <p class="schoolPicText">花津校区鸟瞰</p>
      </a>
     </li>       
     <li class="picLi">
      <a href="###">
       <img class="schoolPic" src="images/school1.png" width="174" height="160"/>
       <p class="schoolPicText">傍晚的教学楼</p>
      </a>
     </li>
     <li class="picLi">
      <a href="###">
       <img class="schoolPic" src="images/school1.png" width="174" height="160" />
       <p class="schoolPicText">图书馆一角</p>
      </a>
     </li>       
    </ul>
   </div>

页面css代码入下：

.ulScollerContent {
    position: relative;
    float: left;
    margin-top: 40px;
    margin-left: 11px;    
    width: 776px;
    height: 182px;
    overflow: hidden;
}
.picUl {
    position: absolute;
    left: 0;
    top: 0;
}
.picLi{
    float: left;
    margin-right: 20px;
    width: 174px;
    height: 182px;
    list-style: none;
}
.schoolPic {
    width: 174px;
    height: 160px;
    overflow: hidden;
}
.schoolPicText {
    font-size: 14px;
    color: #fff;
}

js函数代码：

<script>
    function scrlloer(){
        var box = document.getElementById('scollerBox');
        var picUl = box.getElementsByTagName('ul')[0];
        var picLi = picUl.getElementsByTagName('li');
        var leftArrow = document.getElementById('leftArrow');
        var rightArrow = document.getElementById('rightArrow');
        var speed = 2;    
        picUl.innerHTML += picUl.innerHTML;
        picUl.style.width = (picLi[0].offsetWidth+20)*picLi.length + 'px';
 
        function move(){
            if(picUl.offsetLeft<-picUl.offsetWidth/2) { picUl.style.left='0'; } if(picUl.offsetLeft>0)
            {
                picUl.style.left = -picUl.offsetWidth/2+'px';
            }
            picUl.style.left = picUl.offsetLeft+speed+'px';       
        };
        var timer = setInterval(move,30);
 
        box.onmouseover=function(){
            clearInterval(timer);
        };
        box.onmouseout=function(){
            timer=setInterval(move,30);
        };
        leftArrow.onmouseover=function(){
            speed = -2;
        };
        rightArrow.onmouseover=function(){
            speed = 2;
        };
    };
    scrlloer();
</script>