js达成class样式的改换,插件实现金沙网址

本文实例陈述了js达成class样式的退换、增添及删除的法子。分享给大家供我们参谋。具体剖析如下:

金沙网址,jQuery达成轮播效果(二卡塔尔(قطر‎ – 插件实现

比较遍布的js前端功效,通过改造标签的className完毕相应的作用。

开篇

前一篇小说( jQuery达成轮播效果(一卡塔尔(قطر‎ –
根底卡塔尔讲到了什么用jquery来落到实处三个大约的jquery轮播效果,基本的魔法已经达成了,效果看起来还相中,独一不足的就是:每一次须要轮播效果时,要将代码复制粘贴过去,假设稍稍部分须要改正(比方:轮播时的动漫效果,前一篇使用的是jquery的淡入淡出效果,假若改成滑动作效果果,不可制止的要纠正js代码),那么就须要对js代码实行退换,对本人所写的jquery轮播效果的js代码不纯熟的程序猿来讲,纠正这个js确实很困难。轮播插件所要完毕的指标之一正是插件能够灵活布署(不光只是本篇小说的插件),技士只必要写一点点的代码就足以兑现增进的效应,这本来是一件很好的事体。本篇文章的轮播插件的html和css部分供给技师本人编写,而完结效果与利益的js只供给小量的编排。

现实代码如下:复制代码 代码如下:

插件实现

 

(function($, window, document) {
 //---- Statics
 var DEFAULT_ANIMATE_TYPE = 'fade', 
  ARRAY_SLICE = [].slice,
  ARRAY_CONCAT = [].concat
  ;

 //---- Methods
 function concatArray() {
  var deep = false,
   result = [];
  if(arguments.length > 0 && 
    arguments[arguments.length - 1] === true) {
   deep = true;
  }
  for(var i = 0; i < arguments.length; i++) {
   if(!!arguments[i].length) {
    if(deep) {
     for(var j = 0; j < arguments[i].length; j++) {
      //recursive call
      result =  ARRAY_CONCAT.call(result, 
        concatArray(arguments[i][j], true));
     }
    } else {
     result = ARRAY_CONCAT.call(result, arguments[i]);
    }
   } else if(i != arguments.length - 1 || 
     (arguments[arguments.length - 1] !== true &&
       arguments[arguments.length - 1] !== false)) {
    result.push(arguments[i]);
   }
  }
  return result;
 }

 //----- Core
 $.fn.extend({
  zslider: function(zsliderSetting, autoStart) {
   var itemLenght = 0,
    currItemIndex = 0,
    started = false,
    oInterval = {},
    setting =  {
     intervalTime: 3000,
     step: 1,
     imagePanels: $(),
     animateConfig: {
      atype: 'fade',
      fadeInSpeed: 500,
      fadeOutSpeed: 1000
     },
     panelHoverStop: true,
     ctrlItems: $(),
     ctrlItemActivateType: 'hover' || 'click',
     ctrlItemHoverCls: '',
     flipBtn: {},
     panelHoverShowFlipBtn: true,
     callbacks: {
         animate: null
     }
    },
    that = this
    ;

   //core methods
   var slider = {
     pre: function() {
      var toIndex = itemLenght + 
       (currItemIndex - setting.step) % itemLenght;
      slider.to(toIndex);
     },
     next: function() {
      var toIndex = (currItemIndex + setting.step) % itemLenght;
      slider.to(toIndex);
     },
     to: function(toIndex) {
      //handle the index value
      if(typeof toIndex === 'function') {
       toIndex = toIndex.call(that, concatArray(setting.imagePanels, true), 
          concatArray(setting.ctrlItems, true),
           currItemIndex, step);
      }
      if(window.isNaN(toIndex)) {
       toIndex = 0;
      }
      toIndex = Math.round(+toIndex) % itemLenght;
      if(toIndex < 0) {
       toIndex = itemLenght + toIndex;
      }

      var currentPanel = setting.imagePanels.eq(currItemIndex),
      toPanel = setting.imagePanels.eq(toIndex),
      currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
      toCtrlItem = setting.ctrlItems.eq(toIndex)
      ;
      if(!setting.callbacks.animate || 
        setting.callbacks.animate.call(that, 
          concatArray(setting.imagePanels, true), 
           concatArray(setting.ctrlItems, true),
            currItemIndex, toIndex) === true) {
       currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
       toCtrlItem.addClass(setting.ctrlItemHoverCls);

       toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
       currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
      }

      //set the current item index
      currItemIndex = toIndex;
     },
     start: function() {
      if(!started) {
       started = true;
       oInterval = 
        window.setInterval(slider.next, setting.intervalTime);
      }
     },
     stop: function() {
      if(started) {
       started = false;
       window.clearInterval(oInterval);
      }
     },
     isStarted: function() {
      return started;
     }
   };
   function initData() {
    if(zsliderSetting) {
     var temp_callbacks = zsliderSetting.callbacks;

     $.extend(setting, zsliderSetting);
     $.extend(setting.callbacks, temp_callbacks);

     itemLenght = setting.imagePanels.length;
    }
    //convert to the jquery object
    setting.imagePanels = $(setting.imagePanels);
    setting.ctrlItems = $(setting.ctrlItems);
    setting.flipBtn.container = $(setting.flipBtn.container);
    setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
    setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
   }
   function initLook() {
    //show the first image panel and hide other
    setting.imagePanels.hide();
    setting.imagePanels.filter(':first').show();
    //activate the first control item and deactivate other
    setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
    setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
    $(that).css('overflow', 'hidden');
    if(setting.panelHoverShowFlipBtn) {
     showFlipBtn(false);
    }
   }
   function initEvent() {
    $(concatArray(setting.imagePanels, 
      setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
     if(setting.panelHoverStop) {
      slider.stop();
     }
     if(setting.panelHoverShowFlipBtn) {
      showFlipBtn(true);
     }
    }, function() {
     slider.start();
     if(setting.panelHoverShowFlipBtn) {
      showFlipBtn(false);
     }
    });
    if(setting.ctrlItemActivateType === 'click') {
     setting.ctrlItems.unbind('click');
     setting.ctrlItems.bind('click', function() {
      slider.to($(this).index());
     });
    } else {
     setting.ctrlItems.hover(function() {
      slider.stop();
      slider.to($(this).index());
     }, function() {
      slider.start();
     });
    }
    setting.flipBtn.preBtn.unbind('click');
    setting.flipBtn.preBtn.bind('click', function() {
     slider.pre();
    });
    setting.flipBtn.nextBtn.unbind('click');
    setting.flipBtn.nextBtn.bind('click', function() {
     slider.next();
    });
   }
   function init() {
    initData();

    initLook();

    initEvent();
   }

   function showFlipBtn(show) {
    var hasContainer = setting.flipBtn.container.length > 0,
     eles;
    eles = hasContainer ? setting.flipBtn.container :
     //to the dom array:
     /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn), 
       ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
     concatArray(setting.flipBtn.preBtn, 
         setting.flipBtn.nextBtn, true);
    if(show) {
     $(eles).show();
    } else {
     $(eles).hide();
    }
   }

   init();
   if(arguments.length < 2 || !!autoStart){
    slider.start();
   }
   return slider;
  }
 });
})(jQuery, window, document);

 

js实现class的样式的修改、添加、删除 商品编码商品货号规格名称
全选 全不选

 

卡塔尔(قطر‎ – 插件达成 开篇
前一篇小说( jQuery完结轮播效果(一卡塔尔国 –
根基卡塔尔讲到了怎么样用jquery来贯彻叁个简单易行的jquery轮播效果,基本…

仰望本文所述对大家的javascript程序设计有着帮忙。

发表评论

电子邮件地址不会被公开。 必填项已用*标注