Jquery 使用flexslider和ElevateToom的动画错误

使用具有缩放效果的滑块（flexslider）（ElevateToom）；滑块使用缩略图作为滑块的导航。问题在于变焦镜头的显示

我花了一些时间来缩小问题的范围：如果flexslider动画设置为“slide”，变焦镜头将正确显示，但如果动画设置为“fade”，变焦镜头将隐藏在图像后面

我尝试了一系列不同的z索引测试，甚至更改了活动图像的elevateToom文件中的z索引代码，但随后显示了错误的图像

我找到了一个密码笔并用叉子叉了出来

现在#滑块的动画设置为“滑动”，变焦镜头可见。但如果动画未显示或设置为“淡入淡出”，变焦镜头将消失在图像后面

除了z-指数之外，还有什么可能导致这种情况吗？任何关于去哪里看的想法，我很高兴把它们记录下来，只是没有关于原因的想法

谢谢

HTML

JS

---

嗯，我读了代码，也许我理解了问题所在。首先，elevateToom创建一系列

.zoomContainer

来处理所有图像，创建镜头及其所有内容所有这些容器都没有z索引集

第二件事：Flexslider，当它的动画设置为“幻灯片”时，将每个li都设置为浮动，而不设置z索引，因为它是一个简单的幻灯片

在这种情况下，这两个插件一起工作得很好，因为

z-index

不会造成任何问题

当您将动画设置为“淡入”时，情况会发生变化，因为这里Flexslider在li（精确地说是1）上放置了一个

z-index

，以产生淡入效果。当然，ElevateToom不知道这一点，继续工作而不在其元素中添加z索引，因此我们的镜头消失在Flexslider图像后面

为了解决这个问题，我们必须对ElevateToom插件说：“嘿，当我点击幻灯片li时，请将一个大于1的z索引放在我点击的li的zoomContainer中”，但是ElevateToom没有任何选项来帮助我们这么做，因此，我们必须直接处理这些li：我创建了一个函数，将

z-index:2

放在当前li的zoomContainer上

$("#carousel .slides li").click(function(){
  controll($(this).index())
})

function controll(myIndex){
  var i = 0
  $(".zoomContainer").each(function() {
    var myPos= (i == myIndex) ? 2 : 0;
    $(this).css({"z-index": myPos});
    i++;
  });
}

当然，当我加载页面时，我必须将

z-index:2

放在第一个li:

$(window).on('load', function(){
  controll(0)
});

这就是全部代码：这是我对问题本质的看法。：）

编辑1：我在Windows上用Chrome和Firefox尝试了这段代码。我只添加了一个加载程序，因为可能您在onload事件中遇到了问题。我试了好几次，它总是有效的，我从未见过你在评论中说的bug：

$（文档）.ready（函数（）{
$（'旋转木马'）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
项目宽度：135，
项目保证金：5，
asNavFor:“#滑块”，
});
$（“#滑块”）.flexslider({
动画：“淡入淡出”，
控制导航：错误，
animationLoop:false，
幻灯片放映：错误，
同步：“#旋转木马”}）；
$（“.zoom”）.elevateToom（）；
})
$（窗口）.on（'load'，function（）{
对照组（0）；
$（“.loader”）.remove（）；
});
$（“#carousel.slides li”）。单击（函数（）{
controll（$（this.index（））
})
功能控制（myIndex）{
变量i=0
$（“.zoomContainer”）。每个（函数（）{
var myPos=（i==myIndex）？2:0；
$（this.css（{“z-index”：myPos}）；
i++；
});
}

.flexslider{
页边距底部：0！重要；
}
.用于div img的滑块{
宽度：350px；
高度：150像素；
}
.滑块导航{
边缘顶部：10px；
}
.滑盖导航分区img{
宽度：80%；
高度：50px；
}
.滑滑梯{
大纲：0；
}
.弯曲方向导航a：之前{
字体大小：30px；
}
#滑块ul.flex-direction-nav-li a{
显示：无！重要；
}

您的浏览器不支持视频标记。

感谢您的回复。我理解您的逻辑，看起来部分问题已经解决，但在您的代码笔中，旋转木马中的前两项在缩放时显示的是相反的图像（红色显示蓝色，蓝色显示红色；黄色和绿色都正确缩放）。这与我试图更改z索引时遇到的问题类似。由于某些原因，更改z索引会导致某些缩略图显示错误的图像。正如我在编辑中所说，我多次尝试我的代码，但从未见过您所说的错误。也许是密码笔的问题？我真的不知道。如果，出于某种原因，你仍然看到那个bug，我真的不知道如何解决它，因为我无法复制这个问题。因此，我们必须等待另一个用户的解决方案。抱歉：）在带有Firefox浏览器的Mac上，前两种颜色切换。我正在使用Mac和Chrome浏览器，它可以正常工作！我将投票支持你的答案，因为它可以在Chrome上运行。希望我能解决Mac/Firefox的问题。谢谢它现在在Chrome和Firefox上运行。谢谢你的帮助！哦我真的很高兴！：）你了解Mac上firefox的问题是什么吗？

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 135,
    itemMargin: 5,
    asNavFor: '#slider',

  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });

$(".zoom").elevateZoom();

$("#carousel .slides li").click(function(){
  controll($(this).index())
})

function controll(myIndex){
  var i = 0
  $(".zoomContainer").each(function() {
    var myPos= (i == myIndex) ? 2 : 0;
    $(this).css({"z-index": myPos});
    i++;
  });
}

$(window).on('load', function(){
  controll(0)
});