原生JS实现图片无缝滚动方法(附带封装的运动框架)


Posted in Javascript onOctober 01, 2017

话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的。

我们来看看思路吧~

首先我们要实现的效果有以下几点:

小圆点:点击小圆点显示与之对应的图片

向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动

定时器:每隔 2s 自动播放

主要难点在于:

当图片运动到最后一张,点击向右的按钮时,应该显示第一张;

当前显示的是第一张,点击向左的按钮时,应该显示最后一张;

思路:

1、先将第一张图片复制 添加到 ul 最后面,将最后一张图片复制 添加到 ul 最前面(此时 ul 的第一张图片是pic3,最后一张图片是pic0);

2、当图片(ul)运动到pic3,继续向前运动,运动到最后一张pic0时,瞬间把 ul 拉回到第二张图片pic0的位置,然后在继续向前运动;

3、当图片(ul)向后运动到第一张图片pic3时,瞬间把 ul 拉回到倒数第二张图片pic3的位置。

4、还有非常关键的一点:定义iNow变量,用于对应当前显示的图片与ol中的小圆点,并且可以用来关联 ul 的位置。

html代码:

<div id="tab">
  <ul>
    <li><img src="image/pic0.jpg" alt="" /></li>
    <li><img src="image/pic1.jpg" alt="" /></li>
    <li><img src="image/pic2.jpg" alt="" /></li>
    <li><img src="image/pic3.jpg" alt="" /></li>
  </ul>
  <ol>
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="prev" id="prev"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="next" id="next">></a>                 
</div>

css代码:

*{margin: 0; padding: 0;}
li{ list-style: none;}
#tab{
  width: 670px;
  height: 240px;
  border: 1px solid #ccc;
  margin: 50px auto;
  position: relative;
}
#tab ul{
  width: 2680px;
  height: 240px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#tab ul li{
  float: left;
  width: 670px;
}
#tab ul li img{
  width: 670px;
}
#tab ol{
  width: 80px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -40px;
  overflow: hidden;
}
#tab ol li{
  float: left;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}
#tab ol .on{
  background: #f00;
}
#tab .prev,#tab .next{
  display: none;
  width: 40px;
  height: 60px;
  background: rgba(0,0,0,.3);
  filter:alpha(opacity:30);
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -30px;
}
#tab .prev{
  left: 0;
}
#tab .next{
  right: 0;
}

js 代码:

其中animate()是封装好的运动框架,最后面附有说明

window.onload = function(){
  var oTab = document.getElementById('tab');
  var oUl = oTab.getElementsByTagName('ul')[0];
  var aLi1 = oUl.children;
  var oOl = oTab.getElementsByTagName('ol')[0];
  var aLi2 = oOl.children;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  //设置ul的初始位置
  var iNow = 1;  
  oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
  //定时器
  var timer = null;

  //克隆第一张图片 添加在ul的最后面
  var oLi1 = aLi1[0].cloneNode(true);
  //克隆最后一张图片 添加在ul的最前面
  var oLi2 = aLi1[aLi1.length-1].cloneNode(true);
  oUl.appendChild(oLi1);
  oUl.insertBefore(oLi2,aLi1[0]);
  oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px";
  //鼠标移入tab: 关闭定时器,左右按钮显示
  oTab.onmouseover = function(){
    clearInterval(timer);
    prev.style.display = 'block';
    next.style.display = 'block';
  }
  //鼠标移出tab: 开启定时器,左右按钮隐藏
  oTab.onmouseout = function(){
    timer = setInterval(function(){
      toNext();
    },2000);
    prev.style.display = 'none';
    next.style.display = 'none';
  }
  //点击小圆点
  for(var i=0;i<aLi2.length;i++){
    (function(index){
      aLi2[index].onclick = function(){
        iNow = index+1;
        for(var i=0;i<aLi2.length;i++){
          aLi2[i].className = '';
        }
        aLi2[index].className = 'on';
        animate(oUl,{left: -iNow*aLi1[0].offsetWidth});
      }
    })(i);
  }
  //上一个
  prev.onclick=function(){
    iNow--;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == 0){
        iNow = aLi1.length-2;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //下一个
  next.onclick=function(){
    toNext();
  }
  function toNext(){
    iNow++;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == aLi1.length-1){
        iNow = 1;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //设置定时器
  timer = setInterval(function(){
    toNext();
  },2000);
}

封装的animate()运动框架

/*
 * 参数说明:
 * obj: 运动对象
 * json(json形式): 需要修改的属性
 * options(json形式): 
 *       duration: 运动时间
 *       easing: 运动方式(匀速、加速、减速)
 *       complete: 运动完成后执行的函数
*/
function animate(obj,json,options){
  var options=options || {};        
  var duration=options.duration || 500;  //运动时间,默认值为500ms;
  var easing=options.easing || 'linear';  //运动方式,默认为linear匀速
  var start={};
  var dis={};

  for(var name in json){
    start[name]=parseFloat(getStyle(obj,name));  //起始位置
    dis[name]=json[name]-start[name];      //总距离
  }

  var count=Math.floor(duration/30);         //总次数
  var n=0;  //次数

  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
     if(n>count){
      clearInterval(obj.timer);
      options.complete && options.complete();
    }else{
      for(var name in json){
        switch(easing){
          //匀速
          case 'linear':
            var a=n/count;
            var cur=start[name]+dis[name]*a;  //当前位置
            break;
          //加速
          case 'ease-in':
            var a=n/count;
            var cur=start[name]+dis[name]*a*a*a;
            break;
          //减速
          case 'ease-out':
            var a=1-n/count;
            var cur=start[name]+dis[name]*(1-a*a*a);
            break;
        }
         if(name=='opacity'){
          obj.style.opacity=cur;
          obj.style.filter = 'alpha(opacity='+cur*100+')';  //兼容IE8及以下
        }else{
          obj.style[name]=cur+'px';
        }
      }
    }
    n++;
  },30);
}
//获取非行间样式
function getStyle(obj,sName){
  return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}

以上这篇原生JS实现图片无缝滚动方法(附带封装的运动框架)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 #Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 #Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 #Javascript
React实践之Tree组件的使用方法
Sep 30 #Javascript
You might like
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
Java如何格式化日期
2012/08/07 面试题
师范毕业生自荐信
2013/10/17 职场文书
主持人演讲稿范文
2013/12/28 职场文书
幼儿园安全责任书
2014/04/14 职场文书
关于建议书的格式范文
2014/05/20 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
租房协议书范例
2014/10/14 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android