本文实例为大家分享了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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论