( Web ) 슬라이드 효과주기

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 이상에서만..