普通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> 

Answer 2

这是一个示例，但是，我认为您可以改进很多代码:-)。 一旦我完成了旋转木马，并且魔术是活动类和动画的意思，那么我的意思是，如果您可以将转换应用于活动类并根据上一个或下一个按钮确定方向，那么您就可以实现。

 //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(){ var activeSlide = 0, translate = 'translateX(-300px)'; for ( i = 0; i < carouselChildren.length; i++) { if (carouselChildren[i].className) { activeSlide = i; } carouselChildren[i].style.transform += translate; carouselChildren[i].style.transition +="all 2s ease"; } // remove the active class for the current slide carouselChildren[activeSlide].className = ''; if(activeSlide + 1 >= carouselChildren.length){ carouselChildren[0].className = 'active'; for ( i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform = 'translateX(0px)'; } } else{ carouselChildren[++activeSlide].className = 'active'; } }); buttonPrev.addEventListener("click", function(){ console.log(carouselChildren.length); 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" class="active"> <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 3

使用变量来跟踪当前幻灯片并基于它更改transform属性。 我已经完成了下一个按钮的功能，您也可以为上一个按钮使用相同的概念。

var currentSlide = 1; // is in first slide
buttonNext.addEventListener("click", function(){
if(currentSlide == 3){ 
 currentSlide = 0;
}
   for (  i = 0; i < carouselChildren.length; i++) {
    carouselChildren[i].style.transform="translateX("+(currentSlide*-300)+"px)";
       carouselChildren[i].style.transition ="all 2s ease"; // you don't need to do this as well if you define it in css file once
   }
currentSlide++;
});

PS就像在代码中一样，将transform属性添加到现有的css transform属性中是一种不好的做法，因为要添加进一步的计算以使div动画化（转换）时需要这样做。 始终更换它们。