你的位置:首页 > 软件开发 > Java > 利用JavaScript做无缝滚动

利用JavaScript做无缝滚动

发布时间:2017-11-30 02:00:03
<html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> *{marg ...
<html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> *{margin: 0;padding: 0;} #div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li {float: left;width:100px;height: 100px; list-style:none;}</style></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><a href="javascript:;">中速</a><a href="javascript:;">高速</a><div id="div1"><ul> <li><img src='/images/loading.gif' data-original="01.jpg" /></li> <li><img src='/images/loading.gif' data-original="02.jpg" /></li> <li><img src='/images/loading.gif' data-original="03.jpg" /></li> <li><img src='/images/loading.gif' data-original="04.jpg" /></li></ul></div><script type="text/javascript"> var odiv=document.getElementById('div1'); var oul=odiv.getElementsByTagName('ul')[0]; var oli=oul.getElementsByTagName('li'); var speed=-2; oul.innerHTML=oul.innerHTML+oul.innerHTML; oul.style.width=oli[0].offsetWidth*oli.length+'px'; function move(){  if(oul.offsetLeft<-oul.offsetWidth/2)   {    oul.style.left='0';   }  if(oul.offsetLeft>0)   {    oul.style.left=-oul.offsetWidth/2+'px';   }  oul.style.left=oul.offsetLeft+speed+'px'; } var timer=setInterval(move,30); odiv.onmouseover=function() {  clearInterval(timer); } odiv.onmouseout=function() {  timer=setInterval(move,30); } document.getElementsByTagName('a')[0].onclick=function() {  speed=-2; } document.getElementsByTagName('a')[1].onclick=function() {  speed=+2; }  document.getElementsByTagName('a')[2].onclick=function() {  speed=-1; }  document.getElementsByTagName('a')[3].onclick=function() {  speed=-4; }</script></body></html>

附件下载

查看原文

原标题:利用JavaScript做无缝滚动

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。