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 相关文章推荐
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
javascript实现滚动条效果
Mar 24 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
JS setTimeout与setInterval的区别
Apr 20 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中常用数组处理方法实例分析
2008/08/30 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
range 标准化之获取
2011/08/28 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
深入理解Javascript中的this关键字
2015/03/27 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python3实现购物车功能
2018/04/18 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python数据可视化图实现过程详解
2020/06/12 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
长青弘远的面试题
2012/06/09 面试题
大学生物业管理求职信
2013/10/24 职场文书
人力资源总监工作说明
2014/03/03 职场文书
人民教师求职自荐信
2014/03/12 职场文书
好的旅游活动方案
2014/08/19 职场文书
公司表扬信格式
2015/05/04 职场文书
手写实现JS中的new
2021/11/07 Javascript