jquery没有通过css幻灯片循环

我一直在使用（并略有改动）从css-tricks.coma的幻灯片。jquery没有通过css幻灯片循环

当我使用下面的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线（在上面的脚本第三最后一个）从 .appendTo（ '＃slideshow1'）到 .appendTo（改变 '＃slideshow1> DIV：第一'）

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

这里有几个jsfiddles的：

工作版本：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>

谢谢。

来源

2013-01-16 jdas

而不是

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

使用本：

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

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

虽然您可能还能够解决你的IE问题只是通过使用原始的代码并添加以下CSS ：

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

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

来源

2013-01-16 14:25:33 Blazemonger

谢谢你 – jdas

非常感谢你insertAfter命令做的伎俩。然而，我无法得到你的第二个建议。 – jdas

这是一个猜测;我没有足够的关于您的原始代码的信息。很高兴第一个解决方案的帮助。不要忘记接受你的问题的答案，以鼓励他人在未来帮助你。 – Blazemonger

jquery没有通过css幻灯片循环

回答

相关问题