本文实例为大家分享了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.plist = this.bannerinner.getelementsbytagname('p');
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+='<p><img src="" alt="" trueimg="'+curdata['img']+'"></p>';
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 curp = curimg.parentnode;
curp.style.zindex = 1;
myanimate(curp,{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.plist.length;i<len;i++){
var curp = this.plist[i];
if(i===this.step){
utils.css(curp,"zindex",1)
//2、让当前的透明度从0变为1,当动画结束，我们需要让其他的p的透明度的值直接变为0
myanimate(curp,{opacity:1},200,function(){
var curpsib = utils.siblings(this);
for(var k = 0,len = curpsib.length;k<len;k++){
utils.css(curpsib[k],'opacity',0)
}
})
continue
}
utils.css(curp,"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)
代码界的小白，工作中需要多次调用左右转换的轮播图，我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨，求大神给简洁化一下，顺便进行学习。 另外如果默认值是top的话。动画效果会没有。
$.fn.zuoyouzhuan = function(options) {
this.each(function(i, ele) {
slide(ele, options)
})
return this
}
var slide = function(ele, options) {
var des = $.extend({
fangxiang: 'left',
duoshaotu: '4',
sudu: '3000'
}, options)
var $ele = $(ele)
var $ul = $ele.find('ul')
var $li = $ele.find('li')
var x_width = $ele.find('li').width()
var y_height = $ele.find('li').height()
var num = $ele.find('li').length;
if(des.fangxiang == "top") {
var topmar = parseint($li.css('margin-bottom'))
var boderw= parseint($('li').css('border-width'))
$ul.css({ 'heigth': (num * (y_height + topmar + boderw*2)) + 'px' });
}
if(des.fangxiang == "left") {
var boderw= parseint($('li').css('border-width'))
var rightmar = parseint($li.css('margin-right'))
$ul.css({ 'width': (num * (x_width + rightmar+boderw*2)) + 'px' });
}
var t;
if(num > des.duoshaotu) {
var t = setinterval(sidebarflipauto, des.sudu);
function sidebarflipauto() {
if(des.fangxiang == "left") {
$ul.stop(true, true).animate({ "left": (x_width + rightmar) + 'px' }, 300, function() {
$ul.find('li:first').appendto($ul);
$ul.css("left", '0');
});
}
if(des.fangxiang == "top") {
$ul.stop(true, true).animate({ "top": (y_height + topmar) + 'px' }, 300, function() {
$ul.find('li:first').appendto($ul);
$ul.css("top", '0');
});
}
}
$ul.hover(function() {
clearinterval(t);
}, function() {
t = setinterval(sidebarflipauto, 4000);
})
$ele.find('span').eq(0).unbind('click').click(function() {
$ul.find('li:last').prependto($ul);
if(des.fangxiang == "left") {
$ul.css({ "left": (x_width + rightmar) + 'px' });
$ul.stop(true, true).animate({ "left": '0' }, 300);
}
if(des.fangxiang == "top") {
$ul.css({ "top": (y_height + rightmar) + 'px' });
$ul.stop(true, true).animate({ "top": '0' }, 300);
}
})
$ele.find('span').eq(1).unbind('click').click(function() {
sidebarflipauto();
})
}
}
那个.unbind('click').click不写这个有时会执行两次，所以百度了一下这个方法。
求简洁化。
以上就是javascript中的轮播图插件化的封装示例的详细内容。