旋转木马图像移动到不正确的地方点击事件

Question

真的很抱歉，如果这已经回答了其他地方，我发现了几个类似的线程，并遵循了使用position: absolute的建议，但仍然不能让它工作。

我是一个新的网页编码，我只是想玩周围建立一些东西，并已被困在这个。

基本上我已经创建了一个图像轮播，你点击下一个箭头，它会带你到下一张带有淡出/淡出的图像

它在第一次点击时工作得很好，但在那之后的每一次过渡，我的下一个图像都会移动到我的div底部，然后弹出回到原来的位置。

我想我把容器设置为position: relative，我的图像设置为position: absolute，如果我没看错的话，这是正确的设置方式。

有谁能指出哪里出了问题吗?

我在这里做了一个jsFiddle -

https://jsfiddle.net/xf1h05q5/3/

js在这里:

 $('.arrow-next').click(function () {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    if(nextSlide.length === 0) {
        nextSlide = $('.slide').first();
        nextDot = $('.dot').first();
    };
                     currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function () {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();
    var currentDot = $('.active-dot')
    var prevDot = currentDot.prev();
    if(prevSlide.length === 0) {
        prevSlide = $('.slide').last()
        prevDot = $('.dot').last()
    };
    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

});

和滑块的CSS:

.slider {
    position: relative;
    width: 100%;
    height: 240px;
    border-bottom: 1px solid #777;
}
 .slide {
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
}
.active-slide {
    display: block;
    position: absolute;
}
.slide .container img {
    width: 200px;
}

提前感谢您的帮助。

Answer 1

您的幻灯片类必须有，绝对位置，只需添加到。幻灯片:

position: absolute;

因为你的幻灯片在slider下，当隐藏

看看:https://jsfiddle.net/RomanGroovyDev/xf1h05q5/6/

Answer 2

DEMO

使用匿名callback function添加您的fadeIn。总之，fadeIn的下一个图像只有一次，active image已经是fadeOut了。如下所示:

currentSlide.fadeOut(600,function(){
    //perform these things once fadeOut is done
    $(this).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
})

修改后的JS如下:

$('.arrow-next').click(function () {
   var currentSlide = $('.active-slide');
   var nextSlide = currentSlide.next();
   var currentDot = $('.active-dot');
   var nextDot = currentDot.next();
   if (nextSlide.length === 0) {
       nextSlide = $('.slide').first();
       nextDot = $('.dot').first();
   };
   currentSlide.fadeOut(600,function(){
        $(this).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
   })
   currentDot.removeClass('active-dot');
   nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function () {
   var currentSlide = $('.active-slide');
   var prevSlide = currentSlide.prev();
   var currentDot = $('.active-dot')
   var prevDot = currentDot.prev();
   if (prevSlide.length === 0) {
       prevSlide = $('.slide').last()
       prevDot = $('.dot').last()
   };
   currentSlide.fadeOut(600,function(){
   $(this).removeClass('active-slide');
   prevSlide.fadeIn(600).addClass('active-slide');
})
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
});