;(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);