JavaScript实现图片无缝滚动效果


Posted in Javascript onJuly 07, 2017

图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的原理。

原理

以向上无缝滚动为例,其余几个方向的无缝滚动原理是一样的,点击向上无缝滚动。

JavaScript实现图片无缝滚动效果

设定一个可视区域,超过可视区域的部分隐藏,这里是将nav部分作为可视区域,ul#img是中包含所有的图片,实现无缝滚动的关键地方在这:

if(nav.scrollTop==list[list.length-1].offsetTop){
    nav.scrollTop=0
  }else{
    nav.scrollTop++;
  }

这里的nav.scrollTop是指当前的可视对象nav的顶端与正在显示的对象ul#img的顶端的距离,通俗一点来说,就是滚动条向下滚动的距离;list[i]就是要显示的图片列表,list[list.length-1]是指最后一张图片,list[list.length-1].offsetTop是指最后一张图片的顶部到它的父元素的顶部的距离,这个距离是不变固定的,父元素的position必须不能是static(默认的),而且也不能是div,否则会跳过这个元素把上一级当成父元素。

JavaScript实现图片无缝滚动效果

当向下滚动的距离与list[list.length-1].offsetTop的距离相等时,即图片5已经划过,到了显示图片1的时候,让滚动的距离瞬间为0,进行切换时由于两张图片是一样的,人观看时察觉不到,故形成了无缝滚动。

JavaScript实现图片无缝滚动效果

可以发现这里重叠了一张图片,是因为当最后一张图片滚动完之后要形成循环,可视区域内一定要有图片否则一片空白,这里设定的可视区域就是一张图片的高度,故重复的是图片1,如果比一张图片高度要大,则需按顺序多重复几张图片列表的图片。

html部分

四个方向:向上、向下、向左、向右的无缝滚动的html部分是一样的,就表现的部分是一样的,即

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <nav>
    <ul id="img">
      <li><img src="../images/img1.jpg" alt="img1"></li>
      <li><img src="../images/img2.jpg" alt="img2"></li>
      <li><img src="../images/img3.jpg" alt="img3"></li>
      <li><img src="../images/img4.jpg" alt="img4"></li>
      <li><img src="../images/img5.jpg" alt="img5"></li>
      <li><img src="../images/img1.jpg" alt="img1"></li>
    </ul>
  </nav>
  <script type="text/javascript" src="script.js"></script>
  </body>
  </html>

这里需要注意以下:设定的是5张720*405尺寸图片的循环滚动,但是要实现无缝滚动需在后面重复的添加几张图片,具体几张要根据可视区域是图片高度(向上,向下滚动)或宽度(向左,向右滚动)的几倍来确定,我这里设置可视区域的宽度为405px,故只需要重复一张即可,若假设是500px,则需重复两张,类似这样计算。

css部分

这里以向上滚动为例,其余四个方向的样式是类似的,只有些许地方不一样。这里需要注意几点:

1、nav是可视区域,一定要设置宽高,而且overflow要设置为hidden,否则移动不了;

2、ul#img的position要设置,否则默认为static,会影响offsetTop属性,因为父元素的position不能为static,否则会跳过该元素往上一级寻找;

3、要设置ul#img里面的li元素,否则图片上下都会有2px的空白,影响滚动时的效果。

向上、向下滚动样式

两者样式一样。ul#img的高度要是所有图片的总高度,但是由于li本来就是块级元素是由上往下排列的,不设置ul#img的高度也可以,但是向左或向右移动时,必须设置ul#img的宽度为所有图片的总宽度,这里为保持一致就设置了高度为所有图片的总高度;

*{
    padding: 0;
    margin: 0;
  }
  nav {
    width: 720px;
    height: 405px; /*设置可见部分的高度*/
    margin: 40px auto;
    border: 5px solid #eee;
    overflow: hidden;
  }
  #img{
    width: 720px;
    height:2430px;/*设置可见部分的高度*/
    position: relative;/*默认是static*/
  }
  #img li{
    width: 720px;
    height:405px;/*不设置则上下都会有2px的空白*/
  }

向上左、向右滚动样式

两者样式一样。向左、向右滚动时要用float:left让li元素在一行并排显示,而没有用display:inline-block是因为图片这样显示会有空隙,是因为行内元素产生的间隔,故用浮动。这里必须要设置ul#img的宽度为图片的总宽度。

*{
    padding: 0;
    margin: 0;
  }
  nav {
    width: 720px;
    height: 405px; /*设置可见部分的高度*/
    margin: 40px auto;
    border: 5px solid #eee;
    overflow: hidden;
  }
  #img{
    width: 4320px;
    height:405px;/*设置可见部分的高度*/
    position: relative;/*默认是static*/
  }
  #img li{
    width: 720px;
    height:405px;
    float:left;
  }

JavaScript部分

这里以向上滚动为例,JavaScript代码很简单,往下的滚动就是改变一下scrollTop就行,而左右方向就是将scrollTop变成scrollLeft,offsetTop换成offsetLeft就行。

var nav=document.getElementsByTagName('nav')[0];
  var list=document.getElementById('img').getElementsByTagName('li');
  function scroll() {
    if(nav.scrollTop==list[list.length-1].offsetTop){
      nav.scrollTop=0;
    }else{
      nav.scrollTop++;
    }
  }
  var timer= setInterval(scroll,10);

  nav.onmouseover=function(){
    clearInterval(timer);
  };
  nav.onmouseout=function () {
    timer=setInterval(scroll,10);//必须得对timer重新赋值
  }

点击向下无缝滚动
点击向左无缝滚动
点击向右无缝滚动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
jQuery参数列表集合
Apr 06 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
微信小程序联网请求的轮播图
Jul 07 #Javascript
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
vue.js实例todoList项目
Jul 07 #Javascript
You might like
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python底层封装实现方法详解
2020/01/22 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
初任培训自我鉴定
2013/10/07 职场文书
六十岁生日答谢词
2014/01/10 职场文书
庆八一活动方案
2014/01/25 职场文书
个人求职信范例
2014/01/29 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
论文答辩开场白大全
2015/05/27 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
初一数学教学反思
2016/02/17 职场文书