Jquery 이미지 슬라이드_상하좌우 슬라이딩 기본

 

 

2. 이미지 좌우 슬라이딩

<div class="wrap">
	<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>
</div>

.wrap{
	width: 500px;
       height: 250px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
	
.img_list{
	width: 1500px;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
}
    
.img_list li{
    float: left;
}
    
.img_list img{
	width: 500px;
	height: 250px;
}

- li 의 ②부모의 너비(ul)가 이미지의 w의 길이만큼, 개수만큼 넓어야한다.

ex) li 하나의 너비가 500px 이고, li가 총 3개이면, ul의 너비는 1500px이 되는 것

 

- li 는 flow: left; 를 해워야 옆으로 흐를 수 있게 됨

 

- wrap 은 화면에 보일 너비만큼 잡아주고, overflow: hidden;

overflow: hidden; 을 지워보면 이미지가 어떻게 배열되고 있는지 한눈에 볼 수 있음!

 

$(document).ready(function(){
	$('.img_list li').last().prependTo('.img_list');
    $('.img_list').css('left',-500);
    setInterval(function(){
       $('.img_list').animate({left:'-='+500},'slow',function(){
           $('.img_list li') .first().appendTo('.img_list');
           $('.img_list').css('left',-500);
       });
    },2000);
});

$('.img_list li').last().prependTo('.img_list');

→ li의 마지막을 부모의 맨 앞으로 보내서 슬라이드가 무한으로 전환될 수 있게 만들어줌.

 

[ 문법 ]

$(content).prependTo(selector)

 

$('.img_list').css('left',-500);

→ ul을 왼쪽으로 -500px 만큼 이동시켜줘서 오른쪽에서 왼쪽으로 흐르게 만들어줌(이미지 하나의 W 크기)

 

[ 문법 ]

css("propertyname","value");

 

$('.key_list').animate({left:'-='+1000}, 'slow', function(){

→ animate로 움직여줄 것. 계속해서 1000px 씩 더해지면서 왼쪽으로 움직일 것.

 

[ 문법 ]

(selector).animate( {styles},speed,easing,callback )

 

 

 

 

 

3. 이미지 상하 슬라이딩

- 좌우 슬라이드에서 CSS 너비, 높이 수정해주고, JS left 를 'top' 으로 바꿔주면 됨

- 상하 슬라이딩은 좌우 슬라이딩과 반대로 박스가 밑으로 쌓이게 되고, 밑에서 위로 올라오는 거기 때문에 ul의 높이값을 li의 높이, 개수만큼 늘려줘야한다.

.wrap{
	width: 500px;
    height: 250px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
	
.img_list{
	width: 500px;
	height: 750px;
	position: absolute;
	top: 0;
	left: 0;
}   
    
.img_list img{
	width: 500px;
	height: 250px;
}

$(document).ready(function(){
	$('.img_list li').last().prependTo('.img_list');
    $('.img_list').css('top',-250);
    setInterval(function(){
       $('.img_list').animate({top:'-='+250},'slow',function(){
           $('.img_list li') .first().appendTo('.img_list');
           $('.img_list').css('top',-250);
       });
    },2000);
});