向左无缝滚动
<!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; 520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
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; 520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
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