Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)
2016-11-06 18:56
916 查看
1、无缝滚动
原理:(1)让div动起来,让ul一直向左/向右移动;
(2)即利用定时器让物体从左到右或从右到左进行滚动。
采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';(由左向右)
注意:offsetLeft为一个负值。
步骤:(1)复制li——innerHTML和+=,
(2)修改ul的width—可把之前的1倍宽度扩充到两倍
例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
(3)滚动过界时,重设位置,需要进行判断
2、无缝滚动的扩展
(1)改变滚动的方向
a、修改滚动的速度speed
若改变大小,即表示滚动的速度发生改变
若改变正负,即表示滚动的方向
b、修改判断条件
通过修改speed的正负,来改变滚动的方向
(2)鼠标移入、暂停事件
a、鼠标移入:关闭定时器clearInterval(timer);
b、鼠标移出:重新开启定时器,即setInterval(function,1000);
相关的代码如下:
原理:(1)让div动起来,让ul一直向左/向右移动;
(2)即利用定时器让物体从左到右或从右到左进行滚动。
采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';(由左向右)
注意:offsetLeft为一个负值。
步骤:(1)复制li——innerHTML和+=,
(2)修改ul的width—可把之前的1倍宽度扩充到两倍
例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
(3)滚动过界时,重设位置,需要进行判断
2、无缝滚动的扩展
(1)改变滚动的方向
a、修改滚动的速度speed
若改变大小,即表示滚动的速度发生改变
若改变正负,即表示滚动的方向
b、修改判断条件
通过修改speed的正负,来改变滚动的方向
(2)鼠标移入、暂停事件
a、鼠标移入:关闭定时器clearInterval(timer);
b、鼠标移出:重新开启定时器,即setInterval(function,1000);
相关的代码如下:
<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时器实现的图片无缝滚动</title> <style> *{padding: 0;margin: 0;} #div1{ position: relative; width:820px;height: 155px; margin: 100px auto; overflow: hidden;} #div1 ul{ position:absolute; top:0;left: 0; background: #5F9EA0; } #div1 ul li{ list-style: none; width: 205px;height: 155px; float: left; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var speed=2; //利用速度speed控制方向; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //求ul的宽度; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //移动的函数; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ //由于offsetLeft为一个负值,所以需要加一个负号; 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="img/p1.png"></li> <li><img src="img/p2.png"></li> <li><img src="img/p3.png"></li> <li><img src="img/p4.png"></li> </ul> </div> </body> </html></span><span style="font-size: 18px;"> </span>
相关文章推荐
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
- 利用javascript的setInterval()函数实现的图片无缝滚动
- JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。
- javascript实现图片无缝滚动(scrollLeft的用法介绍)
- JavaScript实现简单精致的图片左右无缝滚动效果
- javascript实现多张图片左右无缝滚动效果
- 使用Javascript简单实现图片无缝滚动
- ASP.NET中利用DataList实现图片无缝滚动
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
- 原生javascript实现图片无缝滚动效果
- 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)
- 无缝滚动实现方式一:用自身的offsetLeft 实现
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- html使用javascript实现图片滚动无缝拼接
- Javascript 实现图片无缝滚动
- javascript实现图片无缝滚动
- javascript实现图片无缝滚动-------Day 27
- JavaScrip学习笔记(五)---定时器(一)实现图片无缝滚动
- Javascript实现 图片的无缝滚动
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)