javascript - 点击事件时轮播图像移动到不正确的位置

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');


});

和 slider 的 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

你的幻灯片类必须有绝对位置，只需添加到你的.slide:

position: absolute;

因为隐藏时您的幻灯片位于 slider 下方

看看:

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