js笔记（10）之无缝滚动
生活随笔
收集整理的這篇文章主要介紹了
js笔记（10）之无缝滚动
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
無(wú)縫滾動(dòng)<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>無(wú)縫滾動(dòng)</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>
---------------------------------------------------------------------------------------
總結(jié)
以上是生活随笔為你收集整理的js笔记（10）之无缝滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： js笔记（9）之定时器数字时钟延时提示框
- 下一篇： 阿里技术专家：进击的 Java ，云原生