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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
详细分析vue响应式原理
Jun 22 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输出XML到页面的3种方法详解
2013/06/06 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
Prototype Template对象 学习
2009/07/19 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python的sorted用法详解
2019/06/25 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
基于python 凸包问题的解决
2020/04/16 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python如何测试stdout输出
2020/08/10 Python
animation和transition的区别
2020/10/12 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
董事长职责范文
2013/11/08 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
工程项目经理任命书
2014/06/05 职场文书
行政处罚告知书
2015/07/01 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
Javascript设计模式之原型模式详细
2021/10/05 Javascript