JS定时器的使用--无缝滚动

<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1{width:1172px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul li{float:left;width:293px; height:220px; list-style:none; }
</style>
<script>
window.onload=function ()
{var oDiv=document.getElementById('div1');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var timer;var speed=-2;oUl.innerHTML=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';};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 style="position:absolute; left:0; top:0;"><li><img src="data:images/05.jpg"/></li><li><img src="data:images/05.jpg"/></li><li><img src="data:images/05.jpg"/></li><li><img src="data:images/05.jpg"/></li></ul>
</div>
</body>

一开始遇到了个问题，ul的样式是外部样式，所以代码oUl.style.left=oUl.offsetLeft-2+'px'有问题，程序跑不了，style不能取外部样式，谨记！

定时器
开启定时器
setInterval 间隔型
setTimeout 延时型
停止定时器
clearInterval
clearTimeout

转载于:https://www.cnblogs.com/919czzl/p/4314066.html

JS定时器的使用--无缝滚动相关推荐

初探js特效魅力之无缝滚动
初探js特效魅力之无缝滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
html图片纵向无缝滚动,HTML内容或图片无缝滚动技巧
要让HTML页面的内容或图片实现无缝滚动,可以使用 marquee 这个简单的标签,不过这标签的最大问题就是不能首尾相连(无缝)滚动. 使用 DIV + JS 就可以轻松实现无缝滚动: 1) DIV代 ...
怎样用原生js配合css的transition写个无缝滚动
之所以想要写原生js配合css转换的无缝滚动,是因为之前在简书上看到一哥们写的一篇文章,说是在网上找了一堆js配合css transition属性写的轮播插件,可惜没有无缝的效果,结果他用原生js重写 ...
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInter ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...

JS定时器的使用--无缝滚动

JS定时器的使用--无缝滚动相关推荐

最新文章

热门文章