我正在尝试使用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; }
}
});
这是我得到的小提琴:
答案 0 :(得分:1)
你几乎是好的,你只需要在每次迭代时增加翻译,因为实际上你总是改变相同的值。你需要做这样的事情:
'transform': 'translate(' + -(index * carouselWidth) + 'px, ' + 0 + 'px)'
随着索引递增,translaion在每次迭代时变得更大:
$(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;
}
}
});
&#13;
.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;
}
&#13;
<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>
&#13;