Javascript Flex容器图像滑块转盘

我正在尝试使用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; }
}
});

$（文档）.ready（函数（）{
var carouselWidth=$（'.rm carousel item'）.width（）；
var-carIndex=0；
var playCarousel=setInterval（函数（）{autoPlayCarousel（carIndex）}，3000）；
功能自动播放转盘（索引）{
var items=$（'.racmma carousel'）.children（）；
对于（变量i=0；iitems.length）{carIndex=0；}
}
});

这就是我得到的东西：

---

你几乎做得很好，你只需要在每次迭代中增加平移，因为实际上你总是在更改相同的值。您需要这样做：

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

随着索引的增加，每次迭代的音译都会变大：

$（文档）.ready（函数（）{
var carouselWidth=$（'.rm carousel item'）.width（）；
var-carIndex=0；
var playCarousel=setInterval（函数（）{
自动播放转盘（carIndex）
}, 1000);
功能自动播放转盘（索引）{
var items=$（'.racmma carousel'）.children（）；
对于（变量i=0；i
.racmma旋转木马{
身高：100%；
最大宽度：10000%；
显示：-moz flex；
显示：-webkit flex；
显示器：flex；
柔性流：行；
证明内容：之间的空间；
溢出：隐藏；
}
.rm传送带项目{
弹性收缩：0；
宽度：100%；
身高：100%；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
过渡：0.6s，全部缓进缓出；
最小高度：200px；
}
#转盘-项目-1{
背景图像：url（/bd/media/hero.jpg）；
背景颜色：蓝色；
}
#转盘-项目-2{
背景图像：url（/bd/media/hero2.jpg）；
背景色：红色；
}
#转盘-项目-3{
背景图像：url（/bd/media/hero3.jpg）；
背景颜色：绿色；
}

Dude谢谢！！我也在做同样的事情，但用了“我”这个词，所以没用。。我没有想过用索引来代替！这是一个有点离题的话题，但是，如何才能让第一个最后一个，如此类推，这样“回滚”就不会发生了happen@Rialcom让我们看看这是怎么回事；）@Rialcom不幸的是，使用实际代码并不容易，你想要另一种方法吗？@Temaniafcom如果是，任何帮助都会非常好！谢谢你的时间！