;(function($){ $.fn.mySlider = function( opt ) { var defaults = { speed: 300, direction: 'left', // 運動方向 可選 left,top prevClass: 'slider-prev', nextClass: 'slider-next', wrapperClass: 'slider-wrapper', moveClass: 'slider-move' }; var options = $.extend( defaults, opt ); var dir = options.direction; var $slider = $( this ), $wrapper = $( '.' + options.wrapperClass, $slider ), $sliderPrev = $( '.' + options.prevClass, $slider ), $sliderNext = $( '.' + options.nextClass, $slider ), $sliderMove = $( '.' + options.moveClass, $slider ), $item = $sliderMove.children(), timer = null; //初始化樣式 if( dir == 'left' ) { var $iSteep = $item.outerWidth(); $sliderMove.css('width',$item.length * $iSteep +'px' ); } else if( dir == 'top' ) { var $iSteep = $item.outerHeight(); $sliderMove.css('height',$item.length * $iSteep +'px' ); }; //添加點擊事件 $sliderNext.on('click',moveNext); $sliderPrev.on('click',movePrev); //緩存運動樣式 var data1 = {}, data2 = {}; data1[dir] = -$iSteep; data2[dir] = 0; //運動樣式函數 function moveNext(){ $sliderMove.css( dir,-$iSteep+'px').children().last().prependTo( $sliderMove ); $sliderMove.animate(data2, options.speed); }; function movePrev(){ $sliderMove.animate( data1, options.speed, function(){ $sliderMove.css( dir, 0 ).children().first().appendTo( $sliderMove ); }); }; return this; //返回當前對象,保證可鏈式操作 } })(jQuery);