slide_v2

javascript 반복문

by happyboyhj

HTML

<div class="slide_container">
  <div class="myslide">Slide 1</div>
  <div class="myslide">Slide 2</div>
  <div class="myslide">Slide 3</div>
  <div class="myslide">Slide 4</div>
  <a class="button_next" onclick="slideNext()"></a>
  <a class="button_previous" onclick="slidePrevious()"></a>
</div>

CSS

.slide_container {
  width: 100%;
  height: 60vh;
  margin: 0 auto;
  position: relative;
}

.myslide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  text-align: center;
  line-height: 60vh;
  font-size: 100px;
  color: white;
}

.myslide:nth-child(1) {
  display: block;
  background-color: green;
}

.myslide:nth-child(2) {
  background-color: yellow;
  color: black;
}

.myslide:nth-child(3) {
  background-color: blue;
}

.myslide:nth-child(4) {
  background-color: red;
}

.button_next {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 2%;
}

.button_previous {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 2%;
}

JavaScript

var slideIndex=1;
var mySlide=document.getElementsByClassName('myslide');

function slidePrevious() {

  for (i=0; i<4; i++) {
    mySlide[i].style.display="none";                             
  }

  if(slideIndex==4) {                
    mySlide[2].style.display="block";              
    slideIndex=3;
  }

  else if(slideIndex==3) {                      
    mySlide[1].style.display="block";             
    slideIndex=2;
  }


  else if(slideIndex==2) {                
    mySlide[0].style.display="block";
    slideIndex=1;  
  }

  //반복
  else if(slideIndex==1) {                
    mySlide[3].style.display="block";
    slideIndex=4;  
  }
}

function slideNext() {

  for (i=0; i<4; i++) {
    mySlide[i].style.display="none";                             
  }              

  if(slideIndex==1) {                
    mySlide[1].style.display="block";                
    slideIndex=2;
  }

  else if(slideIndex==2) {                             
    mySlide[2].style.display="block";                
    slideIndex=3;
  }


  else if(slideIndex==3) {                            
    mySlide[3].style.display="block";
    slideIndex=4;
  }

  //반복

  else if(slideIndex==4) {                            
    mySlide[0].style.display="block";
    slideIndex=1;
  }

}