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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
javascript Keycode对照表
2009/10/24 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
python操作日期和时间的方法
2014/03/11 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现基本线性数据结构
2016/08/22 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
django教程如何自学
2020/07/31 Python
python3.5的包存放的具体路径
2020/08/16 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
创立科技Java面试题
2015/11/29 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
前台文员我鉴定
2014/01/12 职场文书
将相和教学反思
2014/02/04 职场文书
售后客服工作职责
2014/06/16 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
学生会自荐信
2019/05/16 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python