Question

真的很抱歉，如果在其他地方已经回答了这个问题，我发现了几个相似的主题，并遵循了使用职位的建议：绝对但仍然无法让它发挥作用。

我是网络编码的新手，我只是想尝试构建一些东西，并且已经陷入困境。

基本上我已经创建了一个图像旋转木马，你单击下一个箭头，它会带你到fadeOut / fadeIn的下一个图像。

第一次点击效果非常出色，但是每次转换后，我的下一张图片移动到div的底部，然后弹回到原位。

我认为我的容器是位置：相对而我的图像是位置：绝对，如果我正确读取是正确的方法。

有谁可以指出哪里出错了？

我在这里做了一个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

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

Answer 2

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

position: absolute;

因为您的幻灯片位于滑块下方，隐藏时

看看：

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

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

2 个答案: