Question

正如您在下面的代码中看到的那样，我的jQuery滑块可以同时工作。我不明白为什么。我希望我的幻灯片分别淡入和淡出，我正在尝试使用for循环来实现这一点，在我的脑海中，一切都应该工作：在每次迭代中，在5秒内每张幻灯片应该淡出，5秒延迟然后逐渐消失。所以每次迭代应该持续11秒。但是所有幻灯片都同时淡入淡出。

的jsfiddle

您可以在JSFiddle中找到源here。

的Javascript

$(document).ready(function() {
var images = $('img');
var imageLength = images.length;
for (var i = 0; i < imageLength; i++) {

    $(images[i]).animate( {'opacity':'0'}, 5000 ).delay( 5000 ).animate( {'opacity':'1'} );
}


});

CSS

.slider {
    position: relative;
    width:80%;
    height:350px;

    margin: 30px auto;
    border:1px solid orange;
}
.slider img {
    width: 100%;
    height: inherit;

    top:0;

}

HTML

<body>
<div class="slider">
    <img id="1" src="https://i0.wp.com/themes.svn.wordpress.org/fine/1.0.59/screenshot.png" alt="" />
    <img id="2" src="https://i0.wp.com/themes.svn.wordpress.org/syn/1.0.2/screenshot.png" alt="" />
    <img id="3" src="https://i0.wp.com/themes.svn.wordpress.org/wordit/1.2.1/screenshot.png" alt="" />
</div>
</body>

你可以帮帮我吗？谢谢。

Answer 1

你被低估的原因是因为它通常被认为是Stack Overflow的最佳实践，可以将你的代码放在问题中，也可以发布一个小提琴。但我发现你是新手，所以我们会让它滑落！： - ）

我不确定你的目标是什么，但我会使用JQuery fadeIn和fadeOut来完成你的任务：

$(document).ready(function() {
    var count = 1;
    setInterval(function() {
        count = ($(".slider :nth-child("+count+")").fadeOut(5000).next().length == 0) ? 1 : count+1;
        $(".slider :nth-child("+count+")").fadeIn(5000);
    });
});

我在这里更新了你的小提琴： http://jsfiddle.net/xu9jm1ut/

我的jquery滑块同时工作。为什么？

的jsfiddle

的Javascript

CSS

HTML

1 个答案: