[jquery] 이미지 롤링 ver1

*jQuery코드를 작성해주세요!!

*변경후 Reset 버튼 클릭!!

<!DOCTYPE html>
<head>
<style>

html , body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
#slider{
	overflow:hidden;
	height:100px;
	position: absolute;
	top:100px;
	left:6px;
	border: 5px solid #1b1b18;
	padding:0px
	margin:0px;
	background-color:#adaca5;
	width:250px;
}
#slide1{
	position:absolute;
	top:0px;
	z-index:1;
}

.slide{
	position:absolute;
	top:200px;
	-webkit-transition: all 0.7s;
	transition: all 0.7s;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var present=1;
	var next=2;
	var index=1;
	var total_slide=$("#slider").children().length;
	var rightBt = $("#right");
	
rightBt.click(function()
{
	present_slide=$("#slide"+present);
	next_slide = $("#slide"+next);
	present_slide.css("top","200px");
	next_slide.css("top","0px");
	present++;
	next++;
	index++;
	if(present>total_slide)
	{
	        present=1;
		next=2;
		for(i=1; i<=total_slide; i++)
		{
			$("#slide"+i).css("top","200px");
		}
		$("#slide1").css("top","0px");
		}else if(present<1){
			present=3;
			next=2;
			for(i=1; i<=total_slide; i++)
			{
				$("#slide"+i).css("top","200px");
			}
			$("#slide3").css("top","0px");
		}
	})
});
</script>
</head>
<body>
<div class="btSet">
	<a id="right"><button style cursor="pointer">change</button></a>
</div>
<div id="slider">
	<div id="slide1" class="slide"><img src="http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image1.jpg?=32823891" width="250px" height="100"/></div>
	<div id="slide2" class="slide"><img src="http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image2.jpg?=32823891" width="250px" height="100"/></div>
	<div id="slide3" class="slide"><img src="http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image3.jpg?=32823891" width="250px" height="100"/></div>
</div>
 </body>
 </html>

-jquery 로 갤러리를 만드는 중입니다.

여기저기 찾아가며 겨우 어설프게 나마 위에서 아래로 이동하며 이미지를 바꿨네요.ㅋ

차츰차츰 완성본을 올려볼까 합니다...~

저작자표시

'배워보자!! > 작업중...' 카테고리의 다른 글

[jquery] 제이쿼리 좌우 이미지 롤링 ver1 (0)	2015.03.09

행복하자요!!

[jquery] 이미지 롤링 ver1

'배워보자!! > 작업중...' 카테고리의 다른 글

댓글

티스토리툴바

[jquery] 이미지 롤링 ver1

'배워보자!! > 작업중...' 카테고리의 다른 글

관련글

댓글

티스토리툴바