使用JQuery Cycle 2插件加载所有图像

Question

我正在使用带有一些图像和fadeout效果的JQuery Cycle 2插件。例如：

$('#imageticker').cycle({ 
    fx:     'fadeout', 
    delay:  -2000 
});

和

<ul id="imageticker">
  <li><img src="image1.png"/></li>
  <li><img src="image2.png"/></li>
  <li><img src="image3.png"/></li>
</ul>

这很有效，但是当页面加载时，我可以看到所有图像堆叠在一起。只有在第一次转换之后，隐藏的图像才会消失并且它应该正常工作。有谁知道如何修改这个？

Answer 1

由于您拥有透明图片，因此最好使用 fade 效果代替fadeout。每次过渡后：

• fadeout，只有一个图片有opacity: 0，其他图片设为1;
• fade，只有一个图片有opacity: 1，其他图片都设为0。

（我也尝试使用初始不透明度，但它没有帮助。）

Answer 2

好的，明白了。似乎fade是默认选项，并将其添加到插件脚本中会导致此问题。

所以，我改变了

$('#imageticker').cycle({ 
    fx:     'fade', 
    delay:  -2000 
});

只是：

$('#imageticker').cycle({ 
    delay:  -2000 
});

并修复了它。