본문 바로가기
웹 퍼블리셔

[Tutorial][Gallery] 클릭하면 변하는 이미지 슬라이드4


 

 

[Gallery] 클릭하면 변하는 이미지 슬라이드

 

실무에서 쓰는 마크업 - webstoryboy

 

자동으로 이미지를 전환하기 효과입니다. 마우스를 오바하면 이미지 전환이 멈춤니다.



sample

  • 큰이미지1 큰이미지2 큰이미지3 큰이미지4 큰이미지5

jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
	var showImg, nextImg;   // 변수 설정
	function fadeInOut(){       // fadeInOut 함수 설정
	showImg = $("#fadeShow img:eq(0)");         // 첫번째 이미지를 showImg에 저장
	nextImg = $("#fadeShow img:eq(1)");           // 두번째 이미지를 nextImg에 저장
	nextImg.addClass("active");          
	// active를 활성화 하면 z-index:1이 적용되어 맨 위로 올라온다.
	nextImg.css("opacity","0").animate({opacity:1},1000, function(){  					
	// 불투명을 0으로 설정하여 이미지를 보이지 않게 합니다. 
	// 불투명을 1로 설정하여 이미지를 서서히 보이게 합니다.
		$("#fadeShow").append( showImg );          // showImg를 맨 마지막으로 보냅니다.
		showImg.removeClass("active");                // active를 제거하여 맨 뒤로 보냅니다.
		});
	}
jQuery(document).ready(function(e) { 
	var timer = setInterval("fadeInOut()", 3000);       
	// 3초에 한번 fadeInOut를 호출하고 timer변수에 저장합니다.
	$("#fadeShow").hover(         // 이미지에 마우스를 오버하면 이벤트를 설정합니다.
		function() {
		   clearInterval(timer)         // 마우스가 오버되면 setInterval를 정지시킵니다.
		}, 
		function(){                             // 마우스가 아웃되면 setInterval를 다시 시작합니다.
		   timer = setInterval("fadeInOut()",2000);
		}
	);
});
</script>

html

<div id="fadeShow"> <img src="큰이미지 주소" alt="큰이미지1" class="active" /> <img src="큰이미지 주소" alt="큰이미지2" /> <img src="큰이미지 주소" alt="큰이미지3" /> <img src="큰이미지 주소" alt="큰이미지4" /> <img src="큰이미지 주소" alt="큰이미지5" /> </div>

CSS

#fadeShow {
	width:600px;
	height:380px;
    	text-align:left;
}
#fadeShow img {
	position:absolute;	  /* 이미지에 절대값을 설정하여 한 곳에서 나오게 합니다. */
}
#fadeShow .active {
	z-index:1;	    /* z-index값을 설정하여 맨 위로 올립니다 */
}

 

 




 

 

 







  • 웹쓰 louis vuitton scarf 2013.03.23 09:47

    그들은 화려한되지 않기 때문에 어떤 사람들은 대단하지 않을 지출하지만, 자신의 마음이 멋진 아이디어를 스쳐하지 않았기 때문에, 또는 얼마나 영리 모르겠어요.