jquery 不通过 css 幻灯片循环

Question

我一直在使用(并稍作改编)来自 css-tricks.coma 的幻灯片。

当我使用以下 jquery 代码时，效果很好(除了 IE，它只是将图像堆叠在一起，而不是循环显示):

setTimeout(function(){ 
$(document).ready(function() {
$("#slideshow1 > div:gt(0)").hide();
                setInterval(function() { 
                $('#slideshow1 > div:first')
                    .fadeOut(500)
                    .next()
                    .fadeIn(500)
                    .end()
                    .appendTo('#slideshow1');
                },  750);
        });}, 750);

有人建议(作为 IE 修复)将 .appendTo 行(上面脚本中的倒数第 3 行)从 .appendTo('#slideshow1')到 .appendTo('#slideshow1 > div:first')

这允许 IE 循环播放幻灯片，但只能循环一次。此外，幻灯片现在也只能在 Safari、Chrome 和 Firefox 上循环一次，而在原始版本中它可以正确循环。

这里有几个 jsfiddle:

工作版本:http://jsfiddle.net/Zcx62/10/非工作版本:http://jsfiddle.net/Zcx62/20/

#slideshow1 {
    margin:0 auto; 
    position: relative; 
    width: 60px; 
    height: 60px;   
    border: 5px solid #CBCED1}

#slideshow1 > div {
    position: absolute}

<div id="slideshow1">
    <div><img src="Image URL in fiddle"></div>
    <div><img src="Image URL in fiddle"></div>
</div> 

谢谢。

Answer 1

代替

.appendTo('#slideshow1 > div:first');

使用这个:

.insertAfter('#slideshow1 > div:last');

http://jsfiddle.net/mblase75/Zcx62/23/

虽然您也可以通过使用您的原始代码并添加以下 CSS 来解决您的 IE 问题:

#slideshow1 > div:first-child {
  z-index: 2;
}

http://jsfiddle.net/mblase75/Zcx62/24/