https://iqidi.com/content/js/jquery.slider.js

1;(function($){
2	$.fn.mySlider = function( opt ) {
3		var defaults = {
4				speed: 300,
5				direction: 'left', //  运动方向 可选 left,top
6				prevClass: 'slider-prev',
7				nextClass: 'slider-next',
8				wrapperClass: 'slider-wrapper',
9				moveClass: 'slider-move'
10		};
11		
12		var options = $.extend( defaults, opt );
13		var dir = options.direction;
14		var $slider = $( this ),
15			$wrapper = $( '.' + options.wrapperClass, $slider ),
16			$sliderPrev = $( '.' + options.prevClass, $slider ),
17			$sliderNext = $( '.' + options.nextClass, $slider ),
18			$sliderMove = $( '.' + options.moveClass, $slider ),
19			$item = $sliderMove.children(),
20			timer = null;
21		
22
23		//初始化样式
24		if( dir == 'left' ) {
25			var $iSteep = $item.outerWidth();
26			$sliderMove.css('width',$item.length * $iSteep +'px' );
27		} 
28		else if( dir == 'top' ) {
29			var $iSteep = $item.outerHeight();
30			$sliderMove.css('height',$item.length * $iSteep +'px' );
31		};
32
33		//添加点击事件
34		$sliderNext.on('click',moveNext);
35		$sliderPrev.on('click',movePrev);
36
37		
38		//缓存运动样式
39		var data1 = {}, data2 = {};
40		data1[dir] = -$iSteep;
41		data2[dir] = 0;
42
43		//运动样式函数
44		function moveNext(){
45			$sliderMove.css( dir,-$iSteep+'px').children().last().prependTo( $sliderMove );
46			$sliderMove.animate(data2,  options.speed);
47		};
48
49		function movePrev(){
50			$sliderMove.animate( data1,  options.speed, function(){
51				$sliderMove.css( dir, 0 ).children().first().appendTo( $sliderMove );
52			});
53		};
54		
55		return this; //返回当前对象,保证可链式操作
56	}
57})(jQuery);