原生javascript制作无缝滚动

来源：互联网发布：知乎 wordpress 编辑：程序博客网时间：2024/04/29 19:30

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>

<style>
*{margin:0;padding:0;}
#div1{
border:1px solid #000;position:relative;
width:650px;height:122px;
margin:10px auto;overflow:hidden;

}
#div1 ul{position:absolute;}
#div1 ul li{
list-style-type:none;
width:150px;height:112px;
float:left;
padding:5px;
}
#div1 ul li img{width:150px;}
.btn{
display: block;
width:50px;height:20px;
background:#ccc;
color:#fff;
float:left;
margin:10px;
}

</style>
<body>
<div id="div1">
<ul>
<li><img src="http://img.blog.csdn.net/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="http://img.blog.csdn.net/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="http://img.blog.csdn.net/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="http://img.blog.csdn.net/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
</ul>
</div>

<a href="javascript:;" class="btn" ><</a>
<a href="javascript:;" class="btn" >></a>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var iSpeed=5;
oUl.innerHTML+=oUl.innerHTML;//复制ul的内容
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//动态设置ul的宽度
//以上顺序倒了ul还是会换行
timer=setInterval(startMove,30);
function startMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){//向左移动到一半时，重新设置left
oUl.style.left=0;
}else if(oUl.offsetLeft>0){//向左移动到0时，重新设置left
oUl.style.left=-oUl.offsetWidth/2+'px';
}

oUl.style.left=oUl.offsetLeft+iSpeed+'px';
}

//左右切换按钮
var aBtn=document.getElementsByTagName('a');
aBtn[0].onclick=function(){
if(iSpeed>0){iSpeed=-iSpeed;}

}
aBtn[1].onclick=function(){
if(iSpeed<0){iSpeed=-iSpeed;}
}
//移入移出动画切换
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(startMove,30);
}
}
</script>
</body>
</html>

0 0