(function($){ $.fn.ckSlide = function(opts){ //.extend() 扩展jQuery类,添加ckSlide方法,参数是对象类型{} 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);//调用图片切换方法,.call() 每个JS函数都包含的一个非继承而来的方法,主要用来指定函数的作用域 that ,通常不严谨写法是change(),有可能会函数冲突。 }); // 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; }); }); //自己添加——鼠标移入小圆点切换轮播图片 $(this).find('.ck-slidebox li').each(function(cindex){ $(this).on('mouseover.slidebox', function(){ change.call(that, cindex, index); index = cindex; }); }); // 鼠标悬停停止自动播放,显示左右切换按钮 $(this).on('mouseover', function(){ if(opts.autoPlay){ clearInterval(time); } $(this).find('.ctrl-slide').css({opacity:0.6}); }); // 鼠标离开轮播界面,开始自动播放,同时隐藏按钮 $(this).on('mouseleave', function(){ if(opts.autoPlay){ startAtuoPlay(opts.interval); } $(this).find('.ctrl-slide').css({opacity:1}); }); startAtuoPlay(opts.interval); // 自动滚动播放 function startAtuoPlay(inum){ if(opts.autoPlay){ time = setInterval(function(){ var old = index; if(index >= count - 1){ index = 0; }else{ index++; } change.call(that, index, old); }, inum);//2秒 } } // 修正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', 'margin-left':'0px' }); //.wrap()包裹页面已经定义的.ck-slide-wrapper以及子元素 slidewrap.wrap('
    '); slide.show(); break; case "y": //添加垂直移动参数 opts['height'] = $(this).height(); slidewrap.css({ 'height':count * opts['height'] }); slide.css({ 'float':'left', 'position':'relative', 'margin-top':'0px' }); slidewrap.wrap('
    '); slide.show(); break; } }); }; function change(show, hide){ //获取之前设置在ckSlide对象上的参数 数据 var opts = $(this).data('opts'); //水平移动 if(opts.dir == 'x'){ var x = show * opts['width']; console.log(x) //animate() 与css()执行结果相同,但是过程不同,前者有渐变动画效果 $(this).find('.ck-slide-wrapper').stop().animate({'margin-left':-x}, function(){opts['isAnimate'] = false;}); opts['isAnimate'] = true;//图片在移动过程中设置按钮点击不可用,确保每一次轮播视觉上执行完成, }else if(opts.dir == 'y'){//垂直移动——自己添加 var y = show * opts['height']; $(this).find('.ck-slide-wrapper').stop().animate({'margin-top':-y}, 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,//默认按钮可用 interval:2000//默认自动2秒切换 }; })(jQuery);