js笔记（10）之无缝滚动

来源：互联网发布：win10自带编程软件编辑：程序博客网时间：2024/05/17 03:26
无缝滚动<!DOCTYPE html><html><head><meta charset="utf-8"><title>无缝滚动</title><style type="text/css">* {margin: 0;padding: 0;}#div1{width:500px;height:171px;  margin: 100px auto;position: relative;background: red;overflow: hidden;}#div1 ul{position: absolute;left: 0;top: 0;}#div1 ul li{float: left;width: 125px;height: 171px;list-style: none;}</style><script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1');var oUl = oDiv.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');var speed = 2;oUl.innerHTML += oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.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;   //向右走};}</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1"><ul><li><img src="img1/1.jpg"></li><li><img src="img1/2.jpg"></li><li><img src="img1/3.jpg"></li><li><img src="img1/4.jpg"></li></ul></div></body></html>---------------------------------------------------------------------------------------
0 0