js笔记（10）之无缝滚动
生活随笔
收集整理的这篇文章主要介绍了
js笔记（10）之无缝滚动
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
无缝滚动<!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>
---------------------------------------------------------------------------------------
总结
以上是生活随笔为你收集整理的js笔记（10）之无缝滚动的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： js笔记（9）之定时器数字时钟延时提示框
- 下一篇： 「装X指南」：手把手教你包装成程序员大佬