javascript方式实现无缝滚动（两种方式）

javascript方式实现无缝滚动（之一）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.outer{
    margin:30px auto;
    position:relative;
    height:44px;
    width:256px;
    overflow:hidden;
    
}
.inner {
    position:absolute;
    padding:0px;
    margin:0px;
    top:0px;
    left:0px;
    list-style:none;

}
.inner li{
    height:40px;
    width:60px;
    border:2px solid #ccc;
    float:left;
    
}
 .li1{
     background:green;  
  }
 .li2{
     background:red; 
  }
  .li3{
     background:yellow;
  }
  .li4{
      background:pink;
  }
</style>
</head>

<body>
 <center>重复循环显示</center>
  <div id="outer" class="outer">
    <ul id="inner" class="inner">
     <li class="li1">11111</li>
     <li class="li2">22222</li>
     <li class="li3">33333</li>
     <li class="li4">44444</li>
    </ul>
  </div>
</body>
<script type="text/javascript">
//这里我们来实现物体的无缝滚动滴呀;
   window.onload=function (){
       var outer=document.getElementById("outer");
       var inner=document.getElementById("inner"); //它是一个数组；
       inner.innerHTML=inner.innerHTML+inner.innerHTML; 
       var lis=inner.getElementsByTagName("li");
       var len=lis.length;
       //开个定时器;
       inner.style.width=(lis[0].offsetWidth*len)+'px';
       setInterval(function (){
           if(Math.abs(inner.offsetLeft)>Math.round(inner.offsetWidth/2)){
             inner.style.left='0';
             //循环的调整为0
           }
           inner.style.left=inner.offsetLeft-1+'px';
       },30)
   }
</script>
</html>

效果：(当然我们可以控制的方法，停止，等一些属性，我们后期再做一个完整的，这里只是做一个简单的demo)

实现方式二：

javascript方式实现无缝滚动（两种方式）

javascript方式实现无缝滚动（两种方式）

相关推荐