1

我一直在使用（并稍加修改）来自 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 行（上面脚本中的倒数第三行）从 .appendTo('#slideshow1') 更改为 .appendTo('#slideshow1 > 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>

谢谢你。

4

1 回答 1

0

代替

.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/

于 2013-01-16T14:25:33.250 回答