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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
实现vuex原理的示例
Oct 21 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 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
用header 发送cookie的php代码
2007/03/16 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python实现在线翻译
2020/06/18 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
客房部经理岗位职责
2015/02/02 职场文书
销售业务员岗位职责
2015/02/13 职场文书
小组口号霸气押韵
2015/12/24 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android