Jquery 이미지 슬라이드_이미지 순서대로 서서히 나타나게

CSS, Jquery 이미지 슬라이드_이미지 순서대로 서서히 나타나게

 

 

 

1. 이미지 서서히 나타나게 하기

- 맨 위 이미지 하나만 보이게 하기 메인 이미지 너비를 100%로 맞추고, 부모 박스에 overflow: hidden; 

- 이미지 2초동안 나타나고 사라지게 만들기(순차적으로 등장)

<ul class="img_list">
	<li>
		<img src="images/1.png" alt="">
	</li>
	<li>
		<img src="images/2.png" alt="">
	</li>
	<li>
		<img src="images/3.png" alt="">
	</li>
</ul>

.img_list{
	width: 500px;
	height: 250px;
	margin: 0 auto;
	overflow: hidden;
}
.img_list img{
	width: 100%;
	height: 250px;
}

$(document).ready(function(){
	var count=0;
	$('.img_list li').eq(count).fadeIn();
	setInterval(function(){
		$('.img_list li').eq(count).fadeOut();
		if(count==2){
			count=0; 
			$('.img_list li').eq(count).fadeIn();
		}else{
			count++;
			$('.img_list li').eq(count).fadeIn();
		}
	},2000);
});

 

- var

→ 변수선언

 

- eq()

→ 순서를 찾아줌. 0번부터 시작

 

- fadeIn() : 서서히 나타남

- fadeOut() : 서서히 사라짐

 

- setinterval(콜백함수, 시간)

→ 효과가 나타날 간격 지정.

→ 1,000 = 1초

 

-  = ; 대입

   == ; 비교

   ++ ; 1을 더함

count==2; → count가 2와 같다면,

count=0; → count에 0을 대입

count++; → count에 1을 더함

 

- if 조건문 사용하는 방법

if(조건){

 조건문 → 만약 ~라면, 이런 조건을 실행하고

} else{ 

 조건문 → 그렇지 않으면, 이런 조건을 실행해

}

 

2초마다 이미지 슬라이드 전환