初探js奇效魅力之无缝滚动
日期：2014-05-16 浏览次数：20348 次
初探js特效魅力之无缝滚动
<!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>
*{
margin:0;
padding:0;
}
#div1{
width:600px;
height:100px;
margin:100px auto;
background:red;
position:relative;
overflow:hidden;
}
#div1 ul{
position:absolute;
left:0px;
top:0px;
}
#div1 ul li{
list-style:none;
float:left;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
times=setInterval(loop,30);
var speed=2;
function loop(){
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left=0+'px';
}
if(oUl.offsetLeft > 0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
oDiv.onmouseover=function(){
clearInterval(times);
}
oDiv.onmouseout=function(){
times=setInterval(loop,30);
}
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
oBtn1.onclick=function(){
speed=-2;
}
oBtn2.onclick=function(){
speed=+2;
}
}
</script>
</head>
<body>
<input id='btn1' type='button' value='向左'/>
<input id='btn2' type='button' value='向右'/>
<div id='div1'>
<ul>
<li><img src='001.jpg' width="150" height="100"/></li>
<li><img src='002.jpg' width="150" height="100"/></li>
<li><img src='003.jpg' width="150" height="100"/></li>
<li><img src='004.jpg' width="150" height="100"/></li>
</ul>
</div>
</body>
</html>
