jquery没有通过css幻灯片循环答案

【问题标题】：jquery not cycling through css slideshowjquery没有通过css幻灯片循环
【发布时间】：2023-03-18 02:58:01
【问题描述】：

我一直在使用（并稍作调整）来自 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>

谢谢。

【问题讨论】：

标签： jquery css internet-explorer slideshow

【解决方案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/

【讨论】：

非常感谢 insertAfter 命令成功了。但是，我无法让您的第二个建议起作用。
这是一个猜测；关于您的原始代码，我真的没有足够的信息。很高兴第一个解决方案有所帮助。不要忘记接受您的问题的答案，以鼓励其他人在未来帮助您。