php文字左右平滑滚动代码,javascript实现的左右无缝滚动效果

本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：

前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。

无缝滚动——左右

#scroll{width:698px;height:108px;margin:50px auto 0;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 -70px 0;}

.btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}

.btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}

#scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}

#scroll ul{position:absolute;}

#scroll li{float:left;width:182px;height:108px;text-align:center;}

#scroll li a:hover{position:relative;top:2px;}

• 
• 
• 
• 

window.onload = function(){

var oDiv = document.getElementById('scroll');

var oUl = oDiv.getElementsByTagName('ul')[0];

var aLi = oDiv.getElementsByTagName('li');

var aBtn = oDiv.getElementsByTagName('a');

var speed = -1;

var timer = 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';

}else if(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';

}else if(oUl.offsetLeft > 0){

oUl.style.left = - oUl.offsetWidth / 2 + 'px';

}

},30);

};

};

PS：如果想要改变移动速度，只需要改变 speed 的值。

希望本文所述对大家JavaScript程序设计有所帮助。