javascript - Flex 容器图像 slider 轮播

Question

我正在尝试使用 flex 容器制作图像轮播。 我希望轮播在特定时间过去时滑动图像。第一次迭代没问题，但是当第二次迭代出现时，它什么也没做。

我不想使用第三方轮播。感谢您的回答

$(document).ready( function() {

var carouselWidth = $('.rm-carousel-item').width();

var carIndex = 0;
var playCarousel = setInterval(function(){ autoPlayCarousel(carIndex) }, 3000);

function autoPlayCarousel(index){
    var items = $('.racmma-carousel').children();

    for (var i = 0; i < items.length; i++){
        console.log(i);
        var item = items.get(i);
        $(item).css({'transform' : 'translate(' + -carouselWidth +'px, ' + 0 + 'px)'});
    }
    carIndex += 1;
    //if ( carIndex > items.length) { carIndex = 0; }
}
});

这是我得到的 fiddle :

https://jsfiddle.net/j565rdk8/3/

Answer 1

你差不多好了，你只需要在每次迭代中增加翻译，因为实际上你总是在改变相同的值。你需要做这样的事情:

'transform': 'translate(' + -(index * carouselWidth) + 'px, ' + 0 + 'px)'

随着索引的增加，翻译在每次迭代中变得更大:

$(document).ready(function() {

  var carouselWidth = $('.rm-carousel-item').width();

  var carIndex = 0;
  var playCarousel = setInterval(function() {
    autoPlayCarousel(carIndex)
  }, 1000);

  function autoPlayCarousel(index) {
    var items = $('.racmma-carousel').children();

    for (var i = 0; i < items.length; i++) {
      var item = items.get(i);
      $(item).css({
        'transform': 'translate(' + -(index * carouselWidth) + 'px, ' + 0 + 'px)'
      });
    }
    carIndex += 1;
    if (carIndex == items.length) {
      carIndex = 0;
    }
  }
});

.racmma-carousel {
  height: 100%;
  max-width: 10000%;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  overflow: hidden;
}

.rm-carousel-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.6s all ease-in-out;
  min-height: 200px;
}

#carousel-item-1 {
  background-image: url(/bd/media/hero.jpg);
  background-color: blue;
}

#carousel-item-2 {
  background-image: url(/bd/media/hero2.jpg);
  background-color: red;
}

#carousel-item-3 {
  background-image: url(/bd/media/hero3.jpg);
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="racmma-carousel">
  <div class="rm-carousel-item" id="carousel-item-1">

  </div>
  <div class="rm-carousel-item" id="carousel-item-2">

  </div>
  <div class="rm-carousel-item" id="carousel-item-3">

  </div>
</div>