https://daemyungresort.com/jquery/plugin/jquery.dbSlideStepMove.js

1;(function($){
2	$.fn.dbSlideStepMove=function(options){
3		var opt={
4			motionDir:'x',         //모션방향('x','y','none')			
5			width:100,             //사이즈
6			height:200,            //사이즈
7			gap:1,                 //간격
8			moveSpeed:300,         //이동속도
9			autoPlayTime:5000     //자동롤링시간(밀리초)
10		}
11		$.extend(opt,options);
12		return this.each(function(){
13			var $this=$(this);
14			var $mask=$this.find('.mask');
15			var $moveSet=$this.find('.moveSet');			
16			var $imgList=$moveSet.find('>li');
17			var $menuSet=$this.find('.menuSet');
18			var $menuList=$menuSet.find('li');
19			var $nextBtn=$this.find('.next');
20			var $prevBtn=$this.find('.prev');
21			var $pageSet=$this.find('.pageSet');
22			var pageSetIs=$pageSet.length;
23			if(pageSetIs){
24				var $currentPage=$pageSet.find('.currentPage');
25				var $totalPage=$pageSet.find('.totalPage');
26				var currentPage=0;
27			}
28			var listNum=$imgList.length;
29			var moveCount=0;
30			var moveWidth=opt.width+opt.gap;
31			var moveHeight=opt.height+opt.gap;
32			var dir=opt.motionDir=='y'?'top':'left';
33			var imgArr=[];  
34			var reClick=1;
35			var timerId;
36			init();
37
38			function init(){
39				setCss();
40				setMouseEvent();
41				setEnterFrame();
42				setPage();
43			}
44			
45			function setCss(){
46				switch(opt.motionDir){
47					case 'x':
48						for(var i=0;i<listNum;i++){
49							var _imgList=$imgList.eq(i);
50							imgArr[i]=_imgList;
51							imgArr[i].data('pos',moveWidth*i);
52							_imgList.css({position:'absolute',left:moveWidth*i});
53						}
54						$moveSet.css({position:'absolute'});
55					break;
56					case 'y':
57						for(var i=0;i<listNum;i++){
58							var _imgList=$imgList.eq(i);
59							imgArr[i]=_imgList;
60							imgArr[i].data('pos',moveHeight*i);
61							_imgList.css({position:'absolute',top:moveHeight*i});
62						}
63						$moveSet.css({position:'absolute'});					
64
65					break;
66					default:
67						for(var i=0;i<listNum;i++){
68							var _imgList=$imgList.eq(i);
69							imgArr[i]=_imgList;
70							imgArr[i].data('pos',moveWidth*i);
71							_imgList.css({position:'absolute',left:moveWidth*i});
72						}
73						$moveSet.css({position:'absolute'});
74
75				}
76			}
77			
78			function setMouseEvent(){
79				$this.bind('mouseenter',function(){
80					clearInterval(timerId);
81				}).bind('mouseleave',function(){
82					setEnterFrame();
83				});
84			
85				$nextBtn.bind('click',function(){
86					if(reClick){
87						reClick=0;
88						dir=opt.motionDir=='y'?'top':'left';
89						setAnimation();
90						
91					}
92				})
93
94				$prevBtn.bind('click',function(){
95					if(reClick){
96						reClick=0;
97						dir=null;
98						setAnimation();
99						
100					}
101				})
102				
103			}
104			
105			function setAnimation(){
106				switch(opt.motionDir){
107					case 'x':
108						if(dir=="left"){
109							moveCount--;		
110						}else{
111							moveCount++;
112							var _pos=imgArr[0].data('pos')-moveWidth;
113							imgArr[listNum-1].data('pos',_pos);
114							imgArr[listNum-1].css({left:_pos});
115							imgArr.unshift(imgArr.pop());
116						}
117						$moveSet.stop().animate({left:moveWidth*moveCount},opt.moveSpeed,function(){	
118							reClick=1;
119							//애니메이션 종료후 위치변경
120							if(dir=="left"){ 			
121								var _pos=imgArr[listNum-1].data('pos')+moveWidth;
122								imgArr[0].data('pos',_pos);
123								imgArr[0].css({left:_pos});							
124								imgArr.push(imgArr.shift());			
125							}
126							setPage();
127						})
128					break;
129					case 'y':
130						if(dir=="top"){
131							moveCount--;			
132						}else{
133							moveCount++;					
134							var _pos=imgArr[0].data('pos')-moveHeight;
135							imgArr[listNum-1].data('pos',_pos);
136							imgArr[listNum-1].css({top:_pos});
137							imgArr.unshift(imgArr.pop());
138					
139						}
140						$moveSet.stop().animate({top:moveHeight*moveCount},opt.moveSpeed,function(){	
141							reClick=1;
142							//애니메이션 종료후 위치변경
143							if(dir=="top"){  
144								var _pos=imgArr[listNum-1].data('pos')+moveHeight;
145								imgArr[0].data('pos',_pos);
146								imgArr[0].css({top:_pos});							
147								imgArr.push(imgArr.shift());							
148							}
149							setPage();
150
151						})
152					break;
153					default:
154						if(dir=="left"){

155							moveCount--;
156							var _pos=imgArr[listNum-1].data('pos')+moveWidth;
157							imgArr[0].data('pos',_pos)
158							imgArr[0].css({left:_pos});							
159							imgArr.push(imgArr.shift());	
160						}else{
161							moveCount++;
162							var _pos=imgArr[0].data('pos')-moveWidth;
163							imgArr[listNum-1].data('pos',_pos)
164							imgArr[listNum-1].css({left:_pos});
165							imgArr.unshift(imgArr.pop());
166						}
167						$moveSet.css({left:moveWidth*moveCount})
168						reClick=1;
169						setPage();
170					break;
171				}
172			}			
173
174			function setEnterFrame(){
175				timerId=setInterval(setAnimation,opt.autoPlayTime);
176			}
177			
178			function setPage(){
179				if(pageSetIs){
180					if(dir=='left'||dir=='top'){
181						currentPage=currentPage==listNum?1:++currentPage;	
182					}else{
183						currentPage=currentPage==1?listNum:--currentPage;
184					}
185					$currentPage.text(currentPage);
186					$totalPage.text(listNum)
187				}
188			}
189
190		})			
191				
192	}			
193})(jQuery)