阅读背景:

javascript无缝滚动图的制作方法。

来源:互联网 
代码部分:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}ul,li{list-style: none;}#box{height: 116px;width: 740px;border: 1px solid #000;margin: 100px;position: relative;overflow: hidden;}#box ul{position: absolute;left: 0;top: 0;}#box ul li{float: left;width: 185px;height: 116px;}#box ul li img{display: block;width: 185px;height: 116px;}#direction p{width: 100px;height: 40px;line-height: 40px;text-align: center;background: green;color: #fff;float: left;margin-right: 5px;}</style><script type="text/javascript">window.onload=function(){var oBox=document.getElementById('box');var oUl=oBox.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var oToleft=document.getElementById('to_left');var oToright=document.getElementById('to_right');var speed=-2;oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';function toleft(){if(-oUl.offsetLeft>oUl.offsetWidth/2){oUl.style.left='0px';}if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+'px';}oUl.style.left=oUl.offsetLeft+speed+'px';}oToleft.onclick=function(){speed=-2;}oToright.onclick=function(){speed=2;}setInterval(toleft,50);}</script></head><body><div id="box"><ul><li><img src="img/a1.jpeg" alt="" /></li><li><img src="img/a2.jpeg" alt="" /></li><li><img src="img/a3.jpeg" alt="" /></li><li><img src="img/a4.jpeg" alt="" /></li></ul></div><div id="direction"><p id="to_left">向左</p><p id="to_right">向右</p></div></body></html><!DOCTYPE html><html><head><meta charse



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: