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

【www.bbyears.com--php函数】

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

    
• 
       
        
        

  校园一角

  
       
      
      
• 
       
        
        

  花津校区鸟瞰

  
       
              
      
• 
       
        
        

  傍晚的教学楼

  
       
      
      
• 
       
        
        

  图书馆一角

  
       
              
     
    

  页面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>

  本文来源：http://www.bbyears.com/jiaocheng/87259.html