幻灯片插件

(function ($) {
  $.fn.extend({
    /*
     * @description slider
     *
     */
    slider: function (opt) {
      var that = this,
        opt = opt || {},
        type = opt.type || \'fade\', //动画类型
        time = opt.time || 6000,//间隔时间
        $list = $(that).find(\'.i\'), //元素的dom
        $index = $(that).find(\'.index ul\'),//索引的dom
        length = $list.length, //元素的长度
        currIndex = 0, //
        slideFunc = getSlideFunc(type),
        runner = slideFunc ? setInterval(slideFunc, time) : function () {
          return false;
        };
      appendIndex(length);
      //鼠标悬停事件
      $(that).hover(function () {
        clearInterval(runner);
      }, function () {
        runner = setInterval(slideFunc, time);
      });
      function getSlideFunc(type) {
        var slideFunc;
        switch (type) {
          case \'fade\':
            slideFunc = function () {
              $list.eq(currIndex).fadeIn(\'normal\').css(\'display\', \'block\');
              $index.find(\'.on\').removeClass(\'on\').addClass(\'off\');
              for(var i = 0; i < length; i++) {
                if (i !== currIndex) {
                  $list.eq(i).css(\'display\', \'none\');
                }else{
                  $index.find(\'li\').eq(i).removeClass(\'off\').addClass(\'on\');
                }
              }
              currIndex = (++currIndex) % length;
            };
            break;
        }
        return slideFunc;
      }
      //添加索引
      function appendIndex(length) {
        var htmlStr = \'<li class="on"></li>\';
        for(var i = 0; i < length-1; i++) {
          htmlStr += \'<li class="off"></li>\';
        }
        $index.html(htmlStr);
      }
    }
  });
})(jQuery);

　　

(function($){
    $.fn.ckSlide = function(opts){
        opts = $.extend({}, $.fn.ckSlide.opts, opts);
        this.each(function(){
            var slidewrap = $(this).find(\'.ck-slide-wrapper\');
            var slide = slidewrap.find(\'li\');
            var count = slide.length;
            var that = this;
            var index = 0;
            var time = null;
            $(this).data(\'opts\', opts);
            // next
            $(this).find(\'.ck-next\').on(\'click\', function(){
                if(opts[\'isAnimate\'] == true){
                    return;
                }
                
                var old = index;
                if(index >= count - 1){
                    index = 0;
                }else{
                    index++;
                }
                change.call(that, index, old);
            });
            // prev
            $(this).find(\'.ck-prev\').on(\'click\', function(){
                if(opts[\'isAnimate\'] == true){
                    return;
                }
                
                var old = index;
                if(index <= 0){
                    index = count - 1;
                }else{                                      
                    index--;
                }
                change.call(that, index, old);
            });
            $(this).find(\'.ck-slidebox li\').each(function(cindex){
                $(this).on(\'click.slidebox\', function(){
                    change.call(that, cindex, index);
                    index = cindex;
                });
            });
            
            // focus clean auto play
            $(this).on(\'mouseover\', function(){
                if(opts.autoPlay){
                    clearInterval(time);
                }
                $(this).find(\'.ctrl-slide\').css({opacity:0.6});
            });
            //  leave
            $(this).on(\'mouseleave\', function(){
                if(opts.autoPlay){
                    startAtuoPlay();
                }
                $(this).find(\'.ctrl-slide\').css({opacity:0.15});
            });
            startAtuoPlay();
            // auto play
            function startAtuoPlay(){
                if(opts.autoPlay){
                    time  = setInterval(function(){
                        var old = index;
                        if(index >= count - 1){
                            index = 0;
                        }else{
                            index++;
                        }
                        change.call(that, index, old);
                    }, 2000);
                }
            }
            // 修正box
            var box = $(this).find(\'.ck-slidebox\');
            box.css({
                \'margin-left\':-(box.width() / 2)
            })
            // dir
            switch(opts.dir){
                case "x":
                    opts[\'width\'] = $(this).width();
                    slidewrap.css({
                        \'width\':count * opts[\'width\']
                    });
                    slide.css({
                        \'float\':\'left\',
                        \'position\':\'relative\'
                    });
                    slidewrap.wrap(\'<div class="ck-slide-dir"></div>\');
                    slide.show();
                    break;
            }
        });
    };
    function change(show, hide){
        var opts = $(this).data(\'opts\');
        if(opts.dir == \'x\'){
            var x = show * opts[\'width\'];
            $(this).find(\'.ck-slide-wrapper\').stop().animate({\'margin-left\':-x}, function(){opts[\'isAnimate\'] = false;});
            opts[\'isAnimate\'] = true
        }else{
            $(this).find(\'.ck-slide-wrapper li\').eq(hide).stop().animate({opacity:0});
            $(this).find(\'.ck-slide-wrapper li\').eq(show).show().css({opacity:0}).stop().animate({opacity:1});
        }
       
        $(this).find(\'.ck-slidebox li\').removeClass(\'current\');
        $(this).find(\'.ck-slidebox li\').eq(show).addClass(\'current\');
    }
    $.fn.ckSlide.opts = {
        autoPlay: false,
        dir: null,
        isAnimate: false
    };
})(jQuery);