괜찮은 Rolling Banner

 스크립트수정파일.zip

Roll 배너 참고 사이트

http://ui.mnet.com/guide/plugin/banner/

$('.contentsList .coverStory').RollingBannerFunc({
					slide_imgItem : $('.contentsList .coverStory .contentsRolling li')	//롤링될 아이템
					,skipBtn : $('.contentsList .coverStory .btn_con') 							//좌우 버튼
					,pauseBtn :  $('.contentsList .coverStory .btnPlayControl .stop') 	//일시정지
					,point : $('.contentsList .coverStory .point_navi a')						//점으로 된 페이징 버튼
					,pagingNum : $('.contentsList .coverStory .btnPlayControl span')	//페이징 넘버	ex> 1 /4 
					,randomStart : true																	 //랜덤 스타트 (기본 : false)
					,aniSpeed : 550																		//모션 스피트
					,delay : 4000																		    //자동 롤링 딜레이
					,startDelay: 0																			//처음 시작시 롤링 시작 지연
					,autoPlay:true																			//자동 롤링 설정 (기본 : true)
					,skipMobius : true																	//무한 롤링 (기본 : false)
					,motionType : "sliding"																//fade, sliding, change, css3(css3,sliding)
					,easeType : "easeInOutQuint"													// easeInOutQuint, easeOutCubic... (기본 : swing)  
					,btnHideMode: false																	//갯수 1개일 경우 스킵 버튼 없앨건지? (기본 : true)
		});

		$('.contentsList .sample_css3').RollingBannerFunc({
					slide_imgItem : $('.contentsList .sample_css3 .contentsRolling li')  //롤링될 아이템
					,skipBtn : $('.contentsList .sample_css3 .btn_con') 						 //좌우 버튼
					,pauseBtn :  $('.contentsList .sample_css3 .btnPlayControl .stop') 	 //일시정지
					,point : $('.contentsList .sample_css3 .point_navi a') 					 //점으로 된 페이징 버튼
					,pagingNum : $('.contentsList .sample_css3 .btnPlayControl span') //페이징 넘버	 ex> 1 /4 
					,randomStart : true																	 //랜덤 스타트 (기본 : false)
					,aniSpeed : 550																		 //모션 스피트		
					,delay : 4000																			 //자동 롤링 딜레이
					,autoPlay:true																			 //자동 롤링 설정 (기본 : true)
					,skipMobius : false																	 //무한 롤링 (기본 : false)
					,motionType : "css3,sliding"														 //fade, sliding, change,css3(css3,sliding) 선택 
					,easeType : "easeInOutQuint" 													 // easeInOutQuint, easeOutCubic... 등
					,startDelay:1000																		 //처음 시작시 롤링 시작 지연
		});		

		$('.contentsList .simple').RollingBannerFunc({
					slide_imgItem : $('.contentsList .simple .contentsRolling li')  //롤링될 아이템
					,point : $('.contentsList .simple .point_navi a') 					 //점으로 된 페이징 버튼
					,aniSpeed : 550																		 
					,autoPlay:false										
					,motionType : "css3,fade"														 //fade, sliding, change,css3(css3,sliding) 선택 													 //처음 시작시 롤링 시작 지연
		});	

 

실제 사용 예제

해당 이미지 <li> : position:absolute 이고,
<ul>은 : overflow:hidden; 적용

	

		
1/25
		

		

		

		

	
	

		
		

			
				
			
		
		
		

			
				
			
		
	

// 메인 배너...
var _body = $('#visualGall');
	_body.RollingBannerFunc({
		slide_imgItem : _body.find('.imgPopupzone li') 
		,skipBtn : _body.find('.btn_con')		  
		,pauseBtn :  _body.find('#alimiPause')
		,stopHtml : ''	
		,playHtml : ''	
		,pagingNum : _body.find('.count span')	  
		,randomStart : false				  
		,aniSpeed : 550					  
		,delay : 4000					  
		,autoPlay:true					  
		,skipMobius : true			//무한 롤링 (기본 : false)
		,motionType : "css3,sliding"		//css3, IE하위 버전은 sliding적용
		// ,easeType : "easeInOutQuint"			  // easeInOutQuint, easeOutCubic... (기본 : swing)  
		,startDelay:1000			  
	});