js轮播图的插件化封装详解
程序员文章站
2022-06-03 14:04:52
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下
具体代码如下:
~function(){
function autobanner...
本文实例为大家分享了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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Swiper实现轮播图效果
下一篇: Vue.js项目部署到服务器的详细步骤