js轮播图的插件化封装详解


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下

具体代码如下:

~function(){
 function AutoBanner(curEleId,ajaxURL,interval){
  //把之前存储获取元素的变量都作为当前实例的私有属性
  this.banner = document.getElementById(curEleId);
  this.bannerInner = utils.firstChild(this.banner);
  this.bannerTip = utils.children(this.banner,"ul")[0];
  this.bannerLink = utils.children(this.banner,'a');
  this.bannerLeft = this.bannerLink[0];
  this.bannerRight = this.bannerLink[1];
  this.divList = this.bannerInner.getElementsByTagName('div');
  this.imgList = this.bannerInner.getElementsByTagName('img');
  this.oLis = this.bannerTip.getElementsByTagName('li');

  //之前的全局变量也应该变为自己的私有属性
  this.jsonData = null;
  this.interval = interval || 3000;
  this.autoTimer = null;
  this.step = 0;
  this.ajaxURL = ajaxURL;
  //返回当前实例
  return this.init();
 }

 AutoBanner.prototype = {
  constructor:AutoBanner,
  //Ajax请求数据
  getData:function(){
   var _this = this;
   var xhr = new XMLHttpRequest;
   xhr.open("get",this.ajaxURL + "?_="+Math.random(),false);
   xhr.onreadystatechange = function(){
    if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
     _this.jsonData = utils.formatJSON(xhr.responseText)
    }
   }
   xhr.send(null)
  },
  //实现数据绑定
  bindData:function(){
   var str = "",str2 = "";
   if(this.jsonData){
    for(var i = 0,len=this.jsonData.length;i<len;i++){
     var curData = this.jsonData[i];
     str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';
     i===0?str2+="<li class='bg'></li>":str2+="<li></li>"
    }
   }
   this.bannerInner.innerHTMl = str;
   this.bannerTip.innerHTML = str2;
  },
  //延迟加载
  lazyImg:function(){
   var _this = this;
   for(var i = 0,len = this.imgList.length;i<len;i++){
    ~function(i){
     var curImg = _this.imgList[i];
     var oImg = new Image;
     oImg.src = curImg.getAttribute('trueImg');
     oImg.onload = function(){
      curImg.src = this.src;
      curImg.style.display = block;
      //只对第一张处理
      if(i===0){
       var curDiv = curImg.parentNode;
       curDiv.style.zIndex = 1;
       myAnimate(curDiv,{opacity:1},200);
      }
      oImg = null;
     }
    }(i)
   }
  },
  //自动轮播
  autoMove:function(){
   if(this.step === this.jsonData.length-1){
    this.step = -1
   }
   this.step++;
   this.setBanner();
  },
  //切换效果和焦点对齐
  setBanner:function(){
   for(var i = 0,len = this.divList.length;i<len;i++){
    var curDiv = this.divList[i];
    if(i===this.step){
     utils.css(curDiv,"zIndex",1)
     //2、让当前的透明度从0变为1,当动画结束,我们需要让其他的div的透明度的值直接变为0
     myAnimate(curDiv,{opacity:1},200,function(){
      var curDivSib = utils.siblings(this);
      for(var k = 0,len = curDivSib.length;k<len;k++){
       utils.css(curDivSib[k],'opacity',0)
      }

     })
     continue
    }
    utils.css(curDiv,"zIndex",0)
   }
   //实现焦点对其
   for(i = 0,len = this.oLis.length;i<len;i++){
    var curLi = this.oLis[i];
    i === this.step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
   }
  },
  //控制自动轮播
  mouseEvent:function(){
   var _this = this;
   this.banner.onmouseover = function(){
    window.clearInterval(_this.autoTimer);
    _this.bannerLeft.style.display = _this.bannerRight.style.display = "block"

   }
   this.banner.onmouseout = function(){
    _this.autoTimer = window.setInterval(function(){
     _this.autoMove.call(_this)
    },_this.interval);
    _this.bannerLeft.style.display = _this.bannerRight.style.display = "none"
   }
  },
  //实现焦点切换
  tipEvent:function(){
   var _this = this;
   for(var i = 0,len = this.oLis.length;i<len;i++){
    var curLi = this.oLis[i];
    curLi.index = i;
    curLi.onclick = function(){
     _this.step = this.index;
     _this.setBanner();
    }
   }
  },
  //实现左右切换
  leftRight:function(){
   var _this = this;
   this.bannerRight.onclick = function(){
    _this.autoMove();
   };
   this.bannerLeft.onclick = function(){
    if(_this.step === 0){
     _this.step = _this.jsonData.length;
    }
    _this.step--;
    _this.setBanner();
   }
  },
  //当前插件的唯一入口 命令模式:init相当于指挥室,指挥各军队协同作战
  init:function(){
   var _this = this;
   this.getData();
   this.bindData();
   window.setTimeout(function(){
    _this.lazyImg();
   },500);
   this.autoTimer = window.setInterval(function(){
    _this.autoMove();
   },this.interval);

   this.mouseEvent();
   this.tipEvent();
   this.leftRight();
   return this;
  }

 }

 window.AutoBanner = AutoBanner
}()

//使用
var banner1 = new AutoBanner('banner','json/banner.txt',1000)

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 #Javascript
Vue.js中组件中的slot实例详解
Jul 17 #Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 #Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 #Javascript
详解利用jsx写vue组件的方法示例
Jul 17 #Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
You might like
php中的一些数组排序方法分享
2012/07/20 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
brook javascript框架介绍
2011/10/10 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 初始化多维数组代码
2008/09/06 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
pybind11在Windows下的使用教程
2019/07/04 Python
python3安装crypto出错及解决方法
2019/07/30 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
保安自我鉴定范文
2013/12/08 职场文书
住房抵押登记委托书
2014/09/27 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
世界名著读书笔记
2015/06/25 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS