如何旋转4张(或更多张)图像，每幅图像之间逐渐消失? [英] How to rotate 4 (or more) images, fading between each one?

问题描述

我有4张图像，我想在一个循环中彼此淡入淡出.我有类似以下内容:

I have 4 images, which I want to fade between each other in a loop. I have something like the following:

<img src="/images/image-1.jpg" id="featureImg1" />
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" />
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" />
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" />

我准备对HTML进行修订，尽管在这种情况下我不能使用绝对定位.我在网站上的其他位置使用jQuery，因此可用.我还需要处理由于图像较大而无法立即加载的图像.

I am up for revisions to the HTML, although I cannot use absolute positioning in this case. I am using jQuery else where on the site, so it's available. I also need to deal with an image not being loaded right away as the images are larger.

推荐答案

我强烈推荐 jQuery Cycle 插件.在这种情况下，它的功能可能超出您的期望，但它的结构合理且易于设置.还有一个名为 jQuery Cycle Lite 的轻量级版本，仅支持淡入淡出过渡.

I'd highly recommend the jQuery Cycle plugin. It may do more than you're looking for in this case, but it's well structured and easy to setup. There's also a lightweight version called jQuery Cycle Lite which just supports fade transitions.

这篇关于如何旋转4张(或更多张)图像，每幅图像之间逐渐消失?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！