[jquery] 제이쿼리 좌우 이미지 롤링 ver1

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

*변경후 Reset 버튼 클릭!!

<!DOCTYPE html>
<head>
<style>
		html , body{
			width:100%;
			height:100%;
			margin:0px;
			padding:0px;
		}
		button{
			width:80px;
			height:30px;
			color:black;
			cursor:pointer;
		}
		#rem{
			left:100px;
		}
		#contents{
			overflow:hidden;
			left:0px;
			top:70px;
			position:absolute;
			width:200px;
			height:100px;
			background-color:red;
			-webkit-transition: all 0.7s;
			transition: all 0.7s;
		}
		.newbox{
			width:200px;
			height:100px;
			left:0px;
			position:relative;
			-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>
var currentMc;
	var oldMc;
	var over = 1;
	var dataArr=[];
	$(document).ready(function(){
			var one = $(document.createElement('div')).css({
					position: 'absolute',  left: '-200px',
					width: '200px', height: '100ox'
			 });
			 var two = $(document.createElement('div')).css({
					position: 'absolute',  left: '0px',
					width: '200px', height: '100ox'
			 });
			 var three = $(document.createElement('div')).css({
					position: 'absolute',  left: '200px',
					width: '200px', height: '100ox'
			 });
			one.attr('class', 'newbox'); 
			two.attr('class', 'newbox'); 
			three.attr('class', 'newbox'); 
			 dataArr[0] = one;
			 dataArr[1] = two;
			 dataArr[2] = three;

			 var container = $(document.createElement('div')).css({
					position: 'absolute',  left: '0px',
					width: '200px', height: '100px'
			 });
			one.append("<div class='newbox'><img  width='200' height='100' src='http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image1.jpg?=32823891'/></div>");
			two.append("<div class='newbox'><img  width='200' height='100' src='http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image2.jpg?=32823891'/></div>");
			three.append("<div class='newbox'><img  width='200' height='100' src='http://cfs.tistory.com/custom/blog/182/1822627/skin/images/image3.jpg?=32823891'/></div>");
			$('#contents').prepend(one);
			$('#contents').prepend(two);
			$('#contents').prepend(three);
			//$('#contents').prepend(container);
			//$('#contents').prepend("<div class='newbox'><img  width='200' height='100' src='img/image1.jpg'/></div>");
		$('#att').click(function(){
			if(over>0)
			{
				over--;
			}
			for(i=0; i<3; i++)
			{
				dataArr[i].css("left",((-200*over)+i*200)+"px");
			}
		})
		$('#rem').click(function(){
			if(over<2)
			{
				over++;
			}
			for(i=0; i<3; i++)
			{
				dataArr[i].css("left",((-200*over)+i*200)+"px");
			}
		})
	})
</script>
</head>
<body>
<button id="att">left</button>
<button id="rem">right</button>
<div  id="contents">

</div>
 </body>
 </html>

-jquery 로 만든 좌우로 롤링 되는 갤러리 입니다....무한 반복되지는 않습니다.

overflow : hidden으로 범위 넘어 가는 부분은 안보이게 처리했습니다. 좌우버튼을 클릭히 이미지 넓이 만큼 이미지 전체를 좌우 이동 시켜줬습니다.

이전에 올린건 아직 미완성이구요. 이번건 또 다른 버전입니다.ㅎ

저작자표시

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

[jquery] 이미지 롤링 ver1 (0)	2015.02.14

행복하자요!!

[jquery] 제이쿼리 좌우 이미지 롤링 ver1

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

댓글

티스토리툴바

[jquery] 제이쿼리 좌우 이미지 롤링 ver1

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

관련글

댓글

티스토리툴바