普通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動畫化（轉換）時需要這樣做。 始終更換它們。