javascript 无缝滚动源码

来源：互联网发布：excel2010软件下载编辑：程序博客网时间：2024/05/16 08:02
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.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:0px;padding:0px;}#move{width:920px;height: 170px;margin:100px auto;position:relative;background: red;overflow:hidden;}#move ul{width:1840px;height:170px;position: absolute;}#move ul li{float:left;list-style:none;}#btns{margin:0px auto;width:150px;height:50px;}</style><script>window.onload=function(){var oUl=document.getElementsByTagName('ul')[0];var oBtn1=document.getElementById('btn1');var oBtn2=document.getElementById('btn2');var timer=null;var speed=5;oUl.innerHTML+=oUl.innerHTML;function moveFun(){if(oUl.offsetLeft>0-5){oUl.style.left=-oUl.offsetWidth/2+'px';}if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0+'px';}oUl.style.left=oUl.offsetLeft+speed+'px';}timer=setInterval(moveFun,30);oUl.onmouseover=function(){clearInterval(timer);};oUl.onmouseout=function(){timer=setInterval(moveFun,30);};oBtn1.onclick=function(){speed=-5;};oBtn2.onclick=function(){speed=5;};};</script></head><body><div id="move"><ul><li><img src="img/1.jpg" /></li><li><img src="img/2.jpg" /></li><li><img src="img/3.jpg" /></li><li><img src="img/4.jpg" /></li></ul></div><div id="btns"><input id="btn1" type="button" value="向左移动" /><input id="btn2" type="button" value="向右移动" /></div></body></html>
0 0