Question

我的Javascript幻灯片显示有效，但前两张图片表现得很笨拙。图像＆＃34;跳过＆＃34;然后，当他们应该褪色时似乎被抓住了。幻灯片显示也从最后一个图像开始，而不是从第一个图像开始，这就是为什么我不按顺序移动HTML中的图像。代码中导致这种情况的原因是什么？

Javascript：

<script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
            .fadeOut(10000)
            .next()
            .fadeIn(10000)
            .end()
            .appendTo('#slideshow');
    }, 10000);
</script>

HTML：

<div id="slideshow">
    <div>
        <img src="img/2.jpg">
    </div>
    <div>
        <img src="img/3.jpg">
    </div>
    <div>
        <img src="img/1.jpg">
    </div>
</div>

CSS：

#slideshow { 
    position: relative; 
    width: 100%; 
    height: 350px; 
}

#slideshow > div { 
    position: absolute;
}

Answer 1

您只需要使用CSS使图像的位置绝对，以便您的图像相互重叠。

    // Get currentUser from cookie
    $rootScope.currentUser = $cookies.get('userId');

    User.get().$promise
        .then(function(user){
            $rootScope.currentUser = user._id && user || null;
        });

		$("#slideshow > div:gt(0)").hide();

		setInterval(function() { 
			$('#slideshow > div:first')
			.fadeOut(5000)
			.next()
			.fadeIn(5000)
			.end()
			.appendTo('#slideshow');
		}, 5000);

		#slideshow > div > img{
			Width: 100px; 
			height: 100px;
			position: absolute;
		}

Answer 2

我发现如果我添加与我拥有的照片相同数量的next / fadein / end序列，我的代码将按照我需要的方式工作。所以，在这种情况下，那是三个，所以我应该在appendTo之前有三个next / fadein / ends。

这使得到下一个图像的过渡变淡，而不是跳跃。

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(5000)
        .next()
        .fadeIn(5000)
        .end()
        .next()
        .fadeIn(5000)
        .end()
        .next()
        .fadeIn(5000)
        .end()
        .appendTo('#slideshow');
    }, 5000);

为什么Js幻灯片跳过前两张幻灯片？

2 个答案: