JavaScrip学习笔记(五)---定时器(一)实现图片无缝滚动
2016-06-04 22:11
756 查看
一、无缝滚动理论基础
基础知识
1.setInterval(function,time)、clearInterval(timer)
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
2.offsetLeft与style.left的区别
offsetLeft与style.left的区别
二、代码片段
三、效果图
基础知识
1.setInterval(function,time)、clearInterval(timer)
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
2.offsetLeft与style.left的区别
offsetLeft与style.left的区别
二、代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ margin: 0; padding: 0; } #div2{ width: 400px; margin: 100px auto; } input{ margin:0 auto; text-align: center; margin-left: 80px; font-size: 40px; } #div1{ width: 712px; height: 108px; margin: 100px auto; position: relative; background-color: red; overflow: hidden; } #div1 ul{ position: absolute; left: 0; top: 0; } #div1 ul li{ float: left; width: 178px; height: 108px; list-style:none; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=document.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var lBtn=document.getElementById('lbtn'); var rBtn=document.getElementById('rbtn'); //将ul复制一份相加复制给ul(这样ul相当于有8张图片) oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //speed控制图片移动方向和速度 var speed=2; 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); } //按钮控制移动方向 lBtn.onclick= function () { speed=-2; } rBtn.onclick=function(){ speed=2; } }; </script> </head> <body> <div id="div2" > <input type="button" value="向左" id="lbtn"/> <input type="button" value="向右" id="rbtn"/> </div> <div id="div1"> <ul> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> </ul> </div> </body> </html>
三、效果图
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享