js无缝滚动

浏览数：21 / 时间：2015年06月09日

向左无缝滚动

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" 
/>
<meta http-equiv="Content-Language" 
content="zh-cn" 
/>
<title>向左无缝滚动</title>
<meta name="keywords" 
content="" 
/>
<meta name="description" 
content="" 
/>
<style type="text/css">
*{
    margin: 0px; padding: 0px; font-size:14px; font-family:‘微软雅黑‘;
}
.clearfix:after{content:‘.‘;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  position:relative; width:520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
  position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
  width:120px; height:120px; background:green; float:left;display:inline; cursor:pointer;
  font-size:40px; color:#fff; text-align:center; line-height:120px; margin:0 5px;
}
</style>
</head>
<body>
<div id=‘box‘>
    <ul class=‘clearfix‘>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
window.onload = function(){
  var 
oBox = $(‘box‘);
  var 
oUl = oBox.getElementsByTagName(‘ul‘)[0];
  var 
oLi = oUl.getElementsByTagName(‘li‘);
  var 
timer = null;
  var 
speed = 2;
  oUl.innerHTML += oUl.innerHTML;
  var 
oW = parseInt(getStyle(oLi[0],‘width‘))+10;
  oUl.style.width = oW*oLi.length+‘px‘;
  toPlay();
  timer = setInterval(toPlay,30);
  oUl.onmousemove = Move;
  oUl.onmouseout = Out;
  function toPlay(){
    if(oUl.offsetLeft<-oUl.offsetWidth/2){
        oUl.style.left=‘0px‘;
    }
    oUl.style.left = oUl.offsetLeft - speed +‘px‘;
  };
  function Move(){
    clearInterval(timer);
  };
  function Out(){
    timer = setInterval(toPlay,30); 
  };
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return 
obj.currentStyle[attr]; 
  }else{
    return 
getComputedStyle(obj,false)[attr]; 
  }
};
function $(id){
  return 
document.getElementById(id);
}
</script>  
</body>
</html>

向右无缝滚动　　

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" 
/>
<meta http-equiv="Content-Language" 
content="zh-cn" 
/>
<title>向左无缝滚动</title>
<meta name="keywords" 
content="" 
/>
<meta name="description" 
content="" 
/>
<style type="text/css">
*{
    margin: 0px; padding: 0px; font-size:14px; font-family:‘微软雅黑‘;
}
.clearfix:after{content:‘.‘;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  position:relative; width:520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
  position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
  width:120px; height:120px; background:green; float:left;display:inline; cursor:pointer;
  font-size:40px; color:#fff; text-align:center; line-height:120px; margin:0 5px;
}
</style>
</head>
<body>
<div id=‘box‘>
    <ul class=‘clearfix‘>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
window.onload = function(){
  var 
oBox = $(‘box‘);
  var 
oUl = oBox.getElementsByTagName(‘ul‘)[0];
  var 
oLi = oUl.getElementsByTagName(‘li‘);
  var 
timer = null;
  var 
speed = 2;
  oUl.innerHTML += oUl.innerHTML;
  var 
oW = parseInt(getStyle(oLi[0],‘width‘))+10;
  oUl.style.width = oW*oLi.length+‘px‘;
  toPlay();
  timer = setInterval(toPlay,30);
  oUl.onmousemove = Move;
  oUl.onmouseout = Out;
  function toPlay(){
    if(oUl.offsetLeft>0){
        oUl.style.left= -oUl.offsetWidth/2+‘px‘;
    }
    oUl.style.left = oUl.offsetLeft + speed +‘px‘;
  };
  function Move(){
    clearInterval(timer);
  };
  function Out(){
    timer = setInterval(toPlay,30); 
  };
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return 
obj.currentStyle[attr]; 
  }else{
    return 
getComputedStyle(obj,false)[attr]; 
  }
};
function $(id){
  return 
document.getElementById(id);
}
</script>  
</body>
</htm