最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
简单实现js无缝滚动效果
时间:2017-03-15 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
*{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vertical-align: top; /*消除3px的距离*/ } .box{ width: 600px; height: 200px; margin: 100px auto; overflow: hidden; position: relative; border: 1px solid red; } ul{ width: 400%; position: absolute; left: 0; top: 0; } ul li{ float: left; }
window.onload = function(){ function $(id){ return document.getElementById(id); } var timer = null; var num = 0; timer = setInterval(autoPlay,20); function autoPlay(){ num--; if(num<=-1200){ num = 0; } $("picBox").style.left = num + "px"; } $("picBox").onmouseover = function(){ clearInterval(timer); } $("picBox").onmouseout = function(){ timer = setInterval(autoPlay,20); } }
|