js实现图片无缝滚动特效


Posted in Javascript onMarch 19, 2020

首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。

JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数。它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInterval是setTimeout的循环版。

关于定时器还有一个用法:消除定时器,方法同样有两种:clearTimeout 和 clearInterval,它们分别对应不同类型的定时器。另外,它们都只接收一个参数,这个参数是定时器返回的一个值(我在chrome中调试发现这个返回值都是数字),用于指定消除那个定时器。

定时器的知识掌握之后,就开始分析怎样使用定时器让元素动起来。其实这个很简单,就是类似电影的原理一样,让元素在很短的时间内发生连续的位移,我们看起来的话这个元素就想是在不停地运动啦。关于怎么让元素产生位移,通过JS修改元素的样式就可以实现,例如

oUl.style.left = oUl.offsetLeft + speed + 'px';

上面的代码中speed就是每次产生的位移。关于speed使用还挺有意思的:我们可以修改speed的正负值来修改滚动的方向。

另外,关于元素的属性 offsetLeft 我个人认为需要注意两点:offsetLeft的值由它自己通过定位的left和自己设定的margin的和、offsetLeft它是相对于它的包含层的距离(offsetTop类似)。当然这都是我自己的理解,肯定不是很准确,这个坑记着,下次专门解决它。

让元素动起来的原理基本就是这样,下面开始分析这个无缝滚动展示图片的实现方法,我举得例子都是向左滚动的,向右的原理一样,代码中有提到:

首先假设需要循环滚动的图片只有4张,为了满足图片滚动起来有循环的要求,就需要把图片如图(1)这样做:

js实现图片无缝滚动特效

这样当第一张图片1滚动出边框时,后面的图片1则出现在图片4的后面,这样效果看起来就和循环一样~

当图片滚动到下面的这种情况时:

js实现图片无缝滚动特效

继续滚动就会导致图片后面出现空白,就不是循环滚动的效果了,其实这点也是程序的关键所在,每当图片滚动到图(2)这种情况时,就应该让图片重新回到图(1)那种状态再继续滚动,这样的话就形成了无缝循环滚动的效果。

另外拓展一下程序写了鼠标移入图片停止滚动,移出继续滚动的效果,就是利用消除定时器的方法实现的,代码很简单就不介绍了。还有我为了样式好看一点,把图片都设置为160*120的尺寸使用的,大家运行代码是需要自己准备图片。

代码如下:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  #div1{
   width: 640px;
   height: 120px;
   margin: 100px auto;
   background-color: #646464;
   position: relative;
   overflow: hidden;
  }
  #div1 ul{
   position:absolute;
   left:0;
   top:0;
   overflow: hidden;
   background-color: #3b7796;
  }

  #div1 ul li{
   float: left;
   width: 160px;
   height: 120px;
   list-style: none;
  }
 </style>

 <script>
  window.onload = function(){
   var oDiv = document.getElementById('div1');
   var oUl = document.getElementById('ul1');
   var speed = 2;//初始化速度

   oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图(2)
   var oLi= document.getElementsByTagName('li');
   oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下

   var oBtn1 = document.getElementById('btn1');
   var oBtn2 = document.getElementById('btn2');


   function move(){
    if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动,当靠左的图4移出边框时
     oUl.style.left = 0;
    }

    if(oUl.offsetLeft > 0){//向右滚动,当靠右的图1移出边框时
     oUl.style.left = -(oUl.offsetWidth/2)+'px';
    }

    oUl.style.left = oUl.offsetLeft + speed + 'px';
   }

   oBtn1.addEventListener('click',function(){
    speed = -2;
   },false);
   oBtn2.addEventListener('click',function(){
    speed = 2;
   },false);

   var timer = setInterval(move,30);//全局变量 ,保存返回的定时器

   oDiv.addEventListener('mouseout', function () {
    timer = setInterval(move,30);
   },false);
   oDiv.addEventListener('mousemove', function () {
    clearInterval(timer);//鼠标移入清除定时器
   },false);
  }
 </script>
</head>
<body>
 <input id="btn1" type="button" value="向左">
 <input id="btn2" type="button" value="向右">
 <div id="div1">

  <ul id="ul1">
   <li><img src="img/img_1.jpg"></li>
   <li><img src="img/img_2.jpg"></li>
   <li><img src="img/img_3.jpg"></li>
   <li><img src="img/img_4.jpg"></li>
  </ul>
 </div>
</body>
</html>

以上就是js实现无缝滚动特效的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
vue.js todolist实现代码
Oct 29 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
学习JavaScript设计模式之观察者模式
Apr 22 #Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 #Javascript
详解javascript实现自定义事件
Jan 19 #Javascript
JS拖拽组件学习使用
Jan 19 #Javascript
理解JS绑定事件
Jan 19 #Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 #Javascript
You might like
留言板翻页的实现详解
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python微信公众号之关键词自动回复
2018/06/15 Python
详解Python正则表达式re模块
2019/03/19 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
django框架创建应用操作示例
2019/09/26 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
建筑工程专业大学生求职信
2014/04/23 职场文书
毕业生应聘求职信
2014/07/10 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
新闻通讯稿模板
2015/07/22 职场文书
英语导游欢迎词
2015/09/30 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python