原生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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
bootstrap表单示例代码分享
May 18 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
node中的session的具体使用
Sep 14 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jQuery 选择器理解
2010/03/16 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
浅析javascript的return语句
2015/12/15 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
委托书的格式
2014/08/01 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python