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 写类方式之二
Jul 05 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
使用js画图之饼图
Jan 12 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JSON获取属性值方法代码实例
Jun 30 Javascript
Vue实现购物车基本功能
Nov 08 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如何获取Cookie并实现模拟登录
2020/07/16 PHP
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python strip()函数 介绍
2013/05/24 Python
python解析xml文件操作实例
2014/10/05 Python
Python BS4库的安装与使用详解
2018/08/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python虚拟环境venv用法详解
2020/05/25 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Linux文件系统类型
2012/02/15 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫