jQuery 如何旋转 4 个（或更多）图像，在每个图像之间淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/449599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate 4 (or more) images, fading between each one?
提问by Darryl Hein
I have 4 images, which I want to fade between each other in a loop. I have something like the following:
我有 4 张图像，我想在循环中彼此淡出。我有如下内容：
<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;" />
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.
我准备修改 HTML，尽管在这种情况下我不能使用绝对定位。我在网站上的其他地方使用 jQuery，所以它是可用的。由于图像较大，我还需要处理未立即加载的图像。
回答by Taeram
I'd highly recommend the jQuery Cycleplugin. 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 Litewhich just supports fade transitions.
我强烈推荐jQuery Cycle插件。在这种情况下，它的功能可能超出您的预期，但它结构良好且易于设置。还有一个叫做jQuery Cycle Lite的轻量级版本，它只支持淡入淡出过渡。
回答by strager
You can use a divand an img, like so:
您可以使用 adiv和 an img，如下所示：
<div id="featureImgContainer">
<img src="/images/image-1.jpg" id="featureImg" />
</div>
In your Javascript do something like this (pseudo-jQuery):
在你的 Javascript 中做这样的事情（伪 jQuery）：
function rotateImage(newImage) {
var oldImage = $("#featureImg").image();
$("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL
$("#featureImg").image(newImage).opacity(0).fadeIn();
}
Basically, we make the div's background the "old" image, and the imgthe new one. We set the imgto 0 opacity, and fade it in, so it appears as if the old image is fading into the new one. After the fade in, the divisn't shown any more.
基本上，我们将div的背景设为“旧”图像，而将img其设为新图像。我们将img不透明度设置为 0，然后淡入淡出，这样看起来就好像旧图像正在淡入新图像中一样。淡入后，div不再显示。
Take care to set up the CSS appropriately to set the width/height of the divand the background position where appropriate.
注意适当地设置 CSS 以在适当的地方设置 的宽度/高度div和背景位置。
回答by Darryl Hein
I have also found this extension to jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/
我还发现了 jQuery 的这个扩展：http: //www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/
It seems to do it quite nicely, although a lot of code for not too much.
它似乎做得很好，虽然很多代码并没有太多。
Edit: I also found the Nivo Sliderwhich I've used quite often and has been working quite well. It also has the ability to have "navigation" and prev/next buttons. Quite handy.
编辑：我还发现了我经常使用并且运行良好的Nivo Slider。它还具有“导航”和上一个/下一个按钮的能力。很方便。
回答by adardesign
you can stay with the core of jQuery and have a loop bring up the z-index..
您可以继续使用 jQuery 的核心，并让循环调出 z-index ..
it can be done in a very simple way...
它可以以非常简单的方式完成......
