JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解


Posted in Javascript onJanuary 09, 2019

本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能。分享给大家供大家参考,具体如下:

一、无缝滚动理论基础

基础知识

1.setInterval(function,time)、clearInterval(timer)

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

2.offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,

这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

二、代码片段

<!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>

三、效果图

 JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 #Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 #Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 #Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
You might like
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
教师聘用意向书
2015/05/11 职场文书
庆七一主持词
2015/06/29 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android