所有图像都显示在加载 JQuery 循环 2 插件时

All images show on load with JQuery Cycle 2 plugin

本文关键字：循环 JQuery 插件 加载 图像 显示      更新时间：2023-09-26

我正在使用带有一些图像和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>

这有效，但是当页面加载时，我可以看到所有图像相互堆叠。只有在第一次过渡之后，隐藏的图像才会消失，并且它才能正常工作。有人知道如何修改这一点吗？

由于您有透明图像，因此最好使用 fade 效果而不是 fadeout 。每次转换后：

  • fadeout，只有一个图像有opacity: 0，其他设置为1;
  • 使用fade，只有一个图像具有opacity: 1，其他图像设置为0。

（我也尝试使用最初的不透明度，但没有帮助。

好的知道了。似乎fade是默认选项，将其添加到插件脚本中会导致这种情况。

所以，我改变了 

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

只是：

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

它修复了它。

相关文章：