javascript实现的左右无缝滚动效果
本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：
前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的js效果。
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>无缝滚动——左右</title>
<linkrel="stylesheet"type="text/css"href="../css/base.css"media="all"/>
<styletype="text/css">
#scroll{width:698px;height:108px;margin:50pxauto0;position:relative;overflow:hidden;}
.btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg)no-repeat-70px-69px;position:absolute;top:20px;left:1px;z-index:1;}
.btn_left:hover{background:url(images/btn.jpg)no-repeat-70px0;}
.btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg)no-repeat1px-69px;position:absolute;top:20px;right:0;z-index:1;}
.btn_right:hover{background:url(images/btn.jpg)no-repeat1px0;}
#scroll.content{width:546px;height:108px;position:relative;overflow:hidden;margin:0auto;}
#scrollul{position:absolute;}
#scrollli{float:left;width:182px;height:108px;text-align:center;}
#scrolllia:hover{position:relative;top:2px;}
</style>
</head>
<body>
<divid="scroll">
<ahref="javascript:;"class="btn_left"></a>
<ahref="javascript:;"class="btn_right"></a>
<divclass="content">
<ul>
<li><ahref="#"><imgsrc="images/1.jpg"width="178"height="108"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/2.jpg"width="178"height="108"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/3.jpg"width="178"height="108"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/4.jpg"width="178"height="108"alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
varoDiv=document.getElementById('scroll');
varoUl=oDiv.getElementsByTagName('ul')[0];
varaLi=oDiv.getElementsByTagName('li');
varaBtn=oDiv.getElementsByTagName('a');
varspeed=-1;
vartimer=null;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+speed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}elseif(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
},30);
aBtn[0].onclick=function(){
speed=-1;
};
aBtn[1].onclick=function(){
speed=1;
};
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+speed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}elseif(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
},30);
};
};
</script>
PS：如果想要改变移动速度，只需要改变speed的值。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。