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 相关文章推荐
JavaScript 面向对象与原型
Apr 10 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP实现简易计算器功能
2020/08/28 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python 换位密码算法的实例详解
2017/07/19 Python
python如何实现反向迭代
2018/03/20 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
采购内勤岗位职责
2013/12/10 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
学校安全管理责任书
2014/07/23 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL