0

有大量褪色的幻灯片要复制和粘贴。但我想了解它是如何工作的......所以我在 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);
4

2 回答 2

1

不幸的是，这不适用于您当前的方法。$.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/

于 2013-04-09T21:34:16.950 回答
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);
});

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

UPDATE 2
for animate 只需将淡入淡出部分替换为 

$('#bildspelsrc').animate({opacity: 0}, 'slow', function() {
        $(this).attr({'src': pics[idx]}).animate({opacity: 1});
    });
于 2013-04-09T21:31:04.227 回答