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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript闭包的理解
Apr 01 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php中的三元运算符使用说明
2011/07/03 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python的setattr函数实例用法
2020/12/16 Python
商务日语毕业生自荐信
2013/11/23 职场文书
经理岗位职责
2015/02/02 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
市场营销计划书
2019/04/24 职场文书