javascript - 普通 Javascript 轮播问题

Question

我已经构建了一个非常简单的轮播，但有一个问题。在我的轮播中，我有三张幻灯片，一个上一个按钮和一个下一个按钮。我想要的是当我单击下一个按钮并在最后一张幻灯片上转到第一张幻灯片时。此外，当我单击上一个按钮并在第一张幻灯片上转到最后一张幻灯片时。我怎样才能实现它？

谢谢

 //Main Container
    var carouseContainer = document.querySelector("#carousel-container");
    
    //Carousel Container
    
var carousel = document.querySelector("#carousel");
    
    //Carousel Children
    var carouselChildren = document.querySelector("#carousel").children;
    
    //Carousel Slides
    var carouselOne = document.querySelector("#carousel-one")
    var carouseTwo = document.querySelector("#carousel-two")
    var carouselThree = document.querySelector("#carousel-three")
    
    //Buttons
    var buttonPrev = document.querySelector("#button-left");
    var buttonNext = document.querySelector("#button-right");
    
    
    
    buttonNext.addEventListener("click", function(){
       for (  i = 0; i < carouselChildren.length; i++) {
           carouselChildren[i].style.transform +="translateX(-300px)";
           carouselChildren[i].style.transition +="all 2s ease";
       }
    });
    
    buttonPrev.addEventListener("click", function(){
       for (  i = 0; i < carouselChildren.length; i++) {
           carouselChildren[i].style.transform +="translateX(300px)";
           carouselChildren[i].style.transition +="all 2s ease";
       }
    });

 * {
        margin:0px;
        padding:0px;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
    }
    
    #carousel-container {
        width:300px;
        height:300px;
        overflow: hidden;
        margin: 0 auto;
        border:1px solid black;
    }
    
    #carousel {
        width:900px;
        height:300px;
    }
    
    #carousel-one, #carousel-two,#carousel-three {
        width:300px;
        height:300px;
        float:left;
    }
    
    #carousel-one {
        background:red;
    }
    
    #carousel-two {
        background:green;   
    }
    
    #carousel-three {
        background:blue;
    }
    
    #buttons {
        text-align: center;
        margin-top:20px;
    }
    
    button {
        border:none;
        color:#fff;
        padding:10px 20px;
        display: inline-block;
        margin-right:20px;
        cursor: pointer;
    }



   

    <div id="carousel-container">
        <div id="carousel">
           <div id="carousel-one">
              <h1>Carousel One Main Heading</h1>
              <h2>Carousel One Sub Heading</h2>
           </div>
           <div id="carousel-two"></div>
           <div id="carousel-three"></div>
        </div>
    </div>
    <div id="buttons">
        <button id="button-left">Previous</button>
        <button id="button-right">Next</button>
    </div>



   

Answer 1

这是您代码中的一个工作示例:

//Main Container
var carouseContainer = document.querySelector("#carousel-container");

//Carousel Container
var carousel = document.querySelector("#carousel");

//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;

//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")

//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");

var current = 0,
    total = 3;

function moveTo(count) {
  var translate = 'translateX(' + (-300 * current) + 'px)';
  for (i = 0; i < carouselChildren.length; i++) {
    carouselChildren[i].style.transform = translate;
  }
}

buttonNext.addEventListener("click", function() {
  current++;
  if (current > total - 1) {
    current = 0;
  }
  moveTo(current);
});

buttonPrev.addEventListener("click", function() {
  current--;
  if (current < 0) {
    current = total - 1;
  }
  moveTo(current);
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
#carousel-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid black;
}
#carousel {
  width: 900px;
  height: 300px;
}
#carousel-one,
#carousel-two,
#carousel-three {
  width: 300px;
  height: 300px;
  float: left;
  transition: all 2s ease;
}
#carousel-one {
  background: red;
}
#carousel-two {
  background: green;
}
#carousel-three {
  background: blue;
}
#buttons {
  text-align: center;
  margin-top: 20px;
}
button {
  border: none;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

<div id="carousel-container">
  <div id="carousel">
    <div id="carousel-one" class="slide">
      <h1>Carousel One Main Heading</h1>
      <h2>Carousel One Sub Heading</h2>
    </div>
    <div id="carousel-two" class="slide"></div>
    <div id="carousel-three" class="slide"></div>
  </div>
</div>
<div id="buttons">
  <button id="button-left">Previous</button>
  <button id="button-right">Next</button>
</div>