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＆gt; div：first'）

这允许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>

谢谢。

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/

jquery不通过css幻灯片循环

1 个答案: