javascript中的轮播图插件化的封装示例

本文实例为大家分享了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":str2+="
"
        }
      }
      this.bannerInner.innerHTMl = str;
      this.bannerTip.innerHTML = str2;
    },
    //延迟加载
    lazyImg:function(){
      var _this = this;
      for(var i = 0,len = this.imgList.length;i
代码界的小白，工作中需要多次调用左右转换的轮播图，我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨，求大神给简洁化一下，顺便进行学习。 另外如果默认值是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不写这个有时会执行两次，所以百度了一下这个方法。
    求简洁化。