( Web ) 슬라이드 효과주기

Programing/Web

( Web ) 슬라이드 효과주기

Enjoy_H 2016. 4. 20. 15:58

1 view

2 view

3 view

ㅇ슬라이드 효과 주기

CSS 부분

	
<style>
	/* new */
	.slide_body {
		width: 100%;
		height: 200px;
		background-color: #A0BCFD;
	}

	.slide_view {
		width: 200px;
		height: 200px;
		background-color:  #FFFFFF;
		margin: auto;
		overflow: hidden;
		position: relative;
	}

	.slide_list {
		transition: transform 500ms;
		transform: translate(0, 0);
	}

	.prep {
		width: 20px;
		height: 20px;
		float: left;
		border: 1px;
		border-color: #000000;
		border-style: inset;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 90px;
		border-radius: 20px;
	}

	.next {
		width: 20px;
		height: 20px;
		float: left;
		border: 1px;
		border-color: #000000;
		border-style: inset;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 90px;
		right: 0px;
		border-radius: 20px;
	}

	.view1 {
		width: 200px;
		height: 200px;
		background-color: #F55FD5;
		position: absolute;
		top: 0px;
	}

	.view2 {
		width: 200px;
		height: 200px;
		background-color: #29BB8C;
		position: absolute;
		top: 0px;
		left: 200px;
	}

	.view3 {
		width: 200px;
		height: 200px;
		background-color: #E2FDA0;
		position: absolute;
		top: 0px;
		left: 400px;
	}

	.slide_view .page_view .page_1{
		width: 15px;
		height: 15px;
		position: absolute;
		right: 1px;
		bottom: 47px;
		background-color: #FFFFFF;
		cursor:pointer;
		border-radius: 15px;
	}

	.slide_view .page_view .page_1.page_on{
		background-color: #FF0000;
	}

	.slide_view .page_view .page_2{
		width: 15px;
		height: 15px;
		position: absolute;
		right: 1px;
		bottom: 26px;
		background-color: #FFFFFF;
		cursor:pointer;
		border-radius: 15px;
	}

	.slide_view .page_view .page_2.page_on{
		background-color: #FF0000;
	}

	.slide_view .page_view .page_3{
		width: 15px;
		height: 15px;
		position: absolute;
		right: 1px;
		bottom : 5px;
		background-color: #FFFFFF;
		cursor:pointer;
		border-radius: 15px;
	}

	.slide_view .page_view .page_3.page_on{
		background-color: #FF0000;
	}
</style>

javascript 부분

	
<script>
	var moveOffsetX = 0;
	var inOffsetX = 200;
	var slide_div_count = 2;

	window.onload = function(){
		var obj = document.getElementById("slide_list");
		var prepBt = document.getElementById("isPrep");
		var nextBt = document.getElementById("isNext");	

		prepBt.onclick = function(){
			//obj.classList.add("left");
			if(moveOffsetX != 0){
				moveOffsetX += inOffsetX;
				obj.style.transform = "translate("+moveOffsetX+"px, 0)";
			}else{
				moveOffsetX = -(inOffsetX*slide_div_count);
				obj.style.transform = "translate("+moveOffsetX+"px, 0)";
			}
			page_control_event(moveOffsetX);
		};

		nextBt.onclick = function(){
			//obj.classList.add("right");
			if(moveOffsetX > -(inOffsetX*slide_div_count)){
				moveOffsetX -= inOffsetX;
				obj.style.transform = "translate("+moveOffsetX+"px, 0)";
			}else{
				moveOffsetX = 0;
				obj.style.transform = "translate("+moveOffsetX+"px, 0)";
			}
			page_control_event(moveOffsetX);
		};
	}

	function page_move(flag_x){
		var obj = document.getElementById("slide_list");
		moveOffsetX = flag_x;
		obj.style.transform = "translate("+flag_x+"px, 0)";
	}

	function page_control_event(flag_x){
		var page_1 = document.getElementById("page_1");
		var page_2 = document.getElementById("page_2");
		var page_3 = document.getElementById("page_3");
		
		page_1.classList.remove("page_on");
		page_2.classList.remove("page_on");
		page_3.classList.remove("page_on");
		
		switch(Number(flag_x)){
			case 0:
				page_1.classList.add("page_on");
				break;

			case -200:
				page_2.classList.add("page_on");
				break;

			case -400:
				page_3.classList.add("page_on");
				break;
		}
		page_move(Number(flag_x));
	}
</script>

HTML 부분

	
<!-- slide_body -->
<div class="slide_body">
	<div class="slide_view">
		<div class="slide_list" id="slide_list">
			<div class="view1">1 view</div>
			<div class="view2">2 view</div>
			<div class="view3">3 view</div>
		</div>

		<!-- prep, next button -->
		<div class="prep" id="isPrep">&lt;</div>
		<div class="next" id="isNext">&gt;</div>

		<!-- page control -->
		<div class="page_view">
			<div class="page_1 page_on" thump="page_control" id="page_1" onclick="page_control_event(0);"></div>
			<div class="page_2" thump="page_control" id="page_2" onclick="page_control_event(-200);"></div>
			<div class="page_3" thump="page_control" id="page_3" onclick="page_control_event(-400);"></div>
		</div>
	</div>
</div><!-- slide_body -->

IE 10 이상에서만..

저작자표시