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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
js实现简单的无缝轮播效果
Sep 05 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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP汉字转换拼音的函数代码
2015/12/30 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
python基于ID3思想的决策树
2018/01/03 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
文员个人求职自荐信
2013/09/21 职场文书
银行简历自我评价
2014/02/11 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
小学生节水倡议书
2015/04/29 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Python实现批量自动整理文件
2022/03/16 Python