使用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 
});

并修复了它。