Question

有大量的淡入淡出幻灯片要复制和粘贴..但我想了解它是如何工作的......所以我在JavaScript中有这个工作幻灯片。如何为其添加淡入淡出效果？可以通过添加jquery fadeOut（）方法来完成吗？提前谢谢！

var counter = 0;

function slideShow() {
var pics = [6];

pics[0] = "bilder/1.jpg";
pics[1] = "bilder/2.jpg";
pics[2] = "bilder/3.jpg";
pics[3] = "bilder/4.jpg";
pics[4] = "bilder/5.jpg";
pics[5] = "bilder/6.jpg";

document.getElementById('bildspelsrc').src = pics[counter];

counter++;
if (counter % 6 == 0) counter = 0;
}

setInterval(slideShow,1000);

Answer 1

var pics[] = {...//images in here}
var idx = 0;

function slide(){
 idx++;
 if(idx == pics.length)
   idx =0;

 $("#bildspelsrc").fadeOut(1000, function(){
    $("#bildspelsrc").attr("src", pics[idx]).fadeIn(1000);
 });
}

<强>已更新
你需要一个触发器，尝试在页面加载时调用它

    $(document).ready(function(){
      setInterval(slide,1000);
});

这将遍历您的图像阵列并首先淡出它们，然后淡入新图像

更新2
for animate只需用

替换淡化部分

$('#bildspelsrc').animate({opacity: 0}, 'slow', function() {
        $(this).attr({'src': pics[idx]}).animate({opacity: 1});
    });

Answer 2

不幸的是，这不符合你当前的方法。 $ .fadeOut（）淡化元素，在幻灯片中实际上是在更改属性。您无法将一张图片淡入另一张图片。正确的方法是使所有幻灯片成为他们自己的DOM元素并在这些元素之间淡出。互联网上有很多例子。但是如果你想坚持你正在做的方式，你可以淡化元素，更改src，然后淡化元素。

    $('#bildspelsrc').fadeOut(250, function () { $(this)[0].src = pics[counter]; }).fadeIn(250);

以下是概念验证的链接：http://jsfiddle.net/dhQk/Y6Epm/

修改为您创建了一个新版本，作为大多数其他滑块开始的开始。这是每个幻灯片将其存储在内存中的位置。然后逐个淡化它们。该代码经过大量评论，可以帮助您解决问题。

http://jsfiddle.net/dhQk/Y6Epm/4/

淡出幻灯片Javascript

2 个答案: