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

这是一个示例，但是，我认为您可以大大改进您的代码:-)。一旦我做了一个旋转木马，魔术就在于活动 class 和动画，我的意思是如果你可以将翻译应用到活动 class 并根据上一个或下一个按钮确定方向，你会实现的。

//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 2

使用变量跟踪当前幻灯片并根据它更改变换属性。我已经为下一个按钮制作了功能，您也可以对上一个按钮使用相同的概念。

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++;
});

P.S。将 transform 属性添加到现有的 css transform 属性就像您在代码中所做的那样是一种不好的做法，因为您正在添加需要发生的进一步计算以便为 div 设置动画（翻译） .始终更换它们。

Answer 3

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

//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>

普通 Javascript 轮播问题

Plain Javascript Carousel Issue

javascript

carousel