jquery - 除非绝对位置，否则不正确地删除/添加类重新加载

Question

我创建了一个非常简单的 jquery 幻灯片，但是当一个类从活动图像中删除并放置到下一个时，我遇到了问题。

当图像位置相对时：删除类后，新图像会在幻灯片下方短暂重新加载

当图像位置为绝对时：幻灯片的导航被破坏，不再是动态的！

这是相对时的样子

这是绝对时的样子

我将如何解决这个问题？

Answer 1

相对方法的问题在于，新图像出现在最后一张完全消失之前，因此新图像会跳转到容器上。我将 sliderResponse 函数更改为：

function sliderResponse(target) {
  images.fadeOut(300).promise().done(function(){
  triggers.removeClass('selected').eq(target).addClass('selected');
  images.eq(target).fadeIn(300);          
  });
}

我使用了完全相同的代码http://storeco.de/，只是改变了这个功能......

它在 chrome 上运行，我没有在其他浏览器中测试过，但你可以试试。

发生这种情况是因为您有：

images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');

因此，当您淡出时，您只需使用不透明度，图像的内容仍然存在，当您淡入 newone 时，它​​会出现下一个，然后 remove('selected') 和 addClass('selected') 进行跳转......如果你来做这件事：

 images.fadeOut(300).removeClass('selected').eq(target).fadeIn(300);
 triggers.removeClass('selected').eq(target).addClass('selected');

它也有效！

Answer 2

我认为问题出在您的javascript中。相对位置是正确的，但这是来自您的脚本：

function sliderResponse(target) {
        images.fadeOut(300).eq(target).fadeIn(300);
        triggers.removeClass('selected').eq(target).addClass('selected');
    }

这是将两个图像设置为在 300 毫秒内可见，具有不同的不透明度，当第二个图像消失时，将第二个图像推到最上面的图像下方。我认为这将解决它：

function sliderResponse(target) {
        images.fadeOut(300);
        setTimeout(images.eq(target).fadeIn(300), 300);
        triggers.removeClass('selected').eq(target).addClass('selected');
    }

Answer 3

在您的 CSS 中尝试更改（在相对示例中）

.images li{
     position:relative;
     width:100%;
     top:0px;
     left:0px;
     float:left;
     overflow:hidden;
}

至

.images{
     position:relative;
     width:100%;
     top:0px;
     left:0px;
     float:left;
     height:639px;
     overflow:hidden;
     z-index:100;
}

和

li {
        list-style:none;
}

应该

ul {
     list-style:none;
}