无缝滚动

来源：互联网发布：centos chmod 777 编辑：程序博客网时间：2024/04/27 18:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:0;padding:0;}#div1{width:800px;/*800=200+200+200+200*/height:100px;/*图片的高度为100px*/margin:50px auto;/*让div这个东西跑到页面的中间去*/position:relative;/*然而，#div1 ul要配合设置成绝对定位*/background:blue;overflow:hidden;/*让每次只出现4张图？？？？*/}#div1 ul{/*ul整体要动起来*/list-style-type:none;position:absolute;/*//整个ul设置成绝对定位是为了移动起来较为方便*/left:0;/*相对于所在的元素的left值*/top:0;}#div1 ul li{float:left;/*保证所有图片在一行显示*/width:200px;/*//为了放东西方便*/height:100px;}</style><script>window.onload=function(){var div1=document.getElementById("div1");var ul1=div1.getElementsByTagName("ul")[0];/*获取ul中的第0个元素*/ul1.innerHTML=ul1.innerHTML+ul1.innerHTML;/*innerHTML用于返回开始和结束之间的HTML*/var li1=ul1.getElementsByTagName('li');ul1.style.width=li1[0].offsetWidth*li1.length+'px';/*在这里设置ul的宽度*//*以下几行代码的作用是：方便选择向左向右滚动，在这里还可以控制快慢问题*/var speed=2;document.getElementsByTagName("a")[0].onclick=function(){/*设置向左移动*/speed=-2;}document.getElementsByTagName('a')[1].onclick=function(){/*设置向右移动*/speed=2;}function move(){/*向左走的处理方法*/if(ul1.offsetLeft<-ul1.offsetWidth/2){ul1.style.left="0";/*让这8张图片从头开始滚动，实际上跳转了一下们，只不过肉眼看不出来*/}/*ul1.style.left=(ul1.offsetLeft-2)+'px';向左滚动*//*向右走的处理方法*/if(ul1.offsetLeft>0){ul1.style.left=-ul1.offsetWidth/2+'px';}ul1.style.left=ul1.offsetLeft+speed+'px';/*这里保证了图片是一直滚动着的*/}var timer=setInterval(move,30);//这里直接出现函数名就可以了。定时器在打开页面后，经过这一步，就重启了div1.onmouseover=function(){clearInterval(timer);}div1.onmouseout=function(){timer=setInterval(move,30);}}</script></head><body>    <br /><br />    <a href="javascript:;">向左走</a>    <a href="javascript:;">向右走</a><div id="div1"><ul >    <li><img src="image2/1.jpg" /></li>        <li><img src="image2/2.jpg" /></li>        <li><img src="image2/3.jpg" /></li>        <li><img src="image2/4.jpg" /></li>    </ul></div></body></html>
0 0