Question

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

谢谢

＆＃13;

 //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";
       }
    });

＆＃13;

 * {
        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;
    }

＆＃13;

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

＆＃13;

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

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

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。将转换属性添加到现有的css转换属性是一种不好的做法，就像在代码中一样，因为您要添加进一步的计算以便动画（转换）div。务必更换它们。

简单的Javascript轮播问题

3 个答案: