이미지 또는 글을 간단하게 슬라이딩(Slideshow plugin for the Tabs with jquery)

이미지 또는 글을 간단하게 슬라이딩(Slideshow plugin for the Tabs with jquery)

이미지나 글들이 일정한 시간에 따라 변하는 것을 본적이 있을 것이다.

이것을 적용하는 방법은 여러가지가 있는데 그중 하나를 적어봅니다.
1. jQuery를 사용하려면 항상 해야 하는 것이 있다.jQuery 파일을 html에 넣어주어야 한다.다음은 구글 CDN에서 받아도로록 하는 것이다.html 문서 처음에 있는 head 부분에 넣어주도록 한다.

2. css를 넣는다.   기존에 가지고 있던 파일에 추가하거나 새로운 파일을 만들어 html에 넣어준다.

/* container for slides */
.images { 	background:#fff url(h3.png) repeat-x; 	border:1px solid #ccc; 	position:relative;	 	height:300px; 	 	width:650px; 	float:left;	 	margin:15px; 	cursor:pointer;
/* CSS3 tweaks for modern browsers */ 	
-moz-border-radius:5px; 	-webkit-border-radius:5px; 	-moz-box-shadow:0 0 25px #666; 	-webkit-box-shadow:0 0 25px #666;	 }  
/* single slide */ 
.images div { 	display:none; 	position:absolute; 	top:0; 	left:0;		 	margin:7px; 	padding:15px 30px 15px 15px; 	height:256px; 	font-size:12px; }  
/* header */ 
.images h3 { 	font-size:22px; 	font-weight:normal; 	margin:0 0 20px 0; 	color:#456; }  
/* tabs (those little circles below slides) */ 
.slidetabs { 	clear:both; 	margin-left:330px; }  
/* single tab */ 
.slidetabs a { 	width:8px; 	height:8px; 	float:left; 	margin:3px; 	background:url(navigato.png) 0 0 no-repeat; 	display:block; 	font-size:1px;		 }  
/* mouseover state */ .slidetabs a:hover { 	background-position:0 -8px;       }  
/* active state (current page state) */ 
.slidetabs a.current { 	background-position:0 -16px;      } 	   
/* prev and next buttons */ 
.forward, .backward {float:left; 	margin-top:140px; 	background:#fff url(hori_lar.png) no-repeat; 	display:block; 	width:30px; 	height:30px; 	cursor:pointer; 	font-size:1px; 	text-indent:-9999em;	 }  
/* next */ 
.forward	{ background-position: 0 -30px; clear:right; } .forward:hover 		{ background-position:-30px -30px; } .forward:active 	 	{ background-position:-60px -30px; }    
/* prev */ 
.backward:hover  		{ background-position:-30px 0; } .backward:active  	{ background-position:-60px 0; }  
/* disabled navigational button. is not needed when tabs are configured with rotate: true */ 
.disabled { 	visibility:hidden !important; }

3. javascript를 문서에 추가합니다.

 

html 문서의 처음 head 부분에 넣거나 문서 뒤쪽에 넣습니다.

 $(function() {  $(".slidetabs").tabs(".images > div", {  	// enable "cross-fading" effect 	effect: 'fade', 	fadeOutSpeed: "slow",  	// start from the beginning after the last tab 	rotate: true  // use the slideshow plugin. It accepts its own configuration }).slideshow(); $(".slidetabs").data("slideshow").play(); }); 

4. 슬라이드를 위한 html 내용을 만듭니다.좌측과 우측에 버튼이 필요 없으면 삭제해도 됩니다.시작, 정지버튼도 역시 필요 없으면 삭제해도 됩니다.

 prev

슬라이드 1번

들어갈 내용 또는 그림을 넣으면 됩니다.

슬라이드 2번

들어갈 내용 또는 그림을 넣으면 됩니다.

   next

 

 

5. 잘되었다면 CSS를 적용한 곳에 맞도록 변경합니다.
원본 글 : http://www.htmldrive.net/items/show/41/Slideshow-plugin-for-the-Tabs-with-jquery데모 사이트 보기 : http://www.htmldrive.net/items/demo/41/Slideshow-plugin-for-the-Tabs-with-jquery

 

파일 다운로드 : http://www.htmldrive.net/items/download/41