使用 Slick 在网页上按顺序淡入淡出一系列照片

Question

我想要一系列的三个图像在网页上一遍又一遍地自动淡入和淡出循环而无需任何用户输入。根据评论中的建议，我决定使用 Slick 库并生成了以下代码：

$('.fade').slick({
    accessibility: false,
    arrows: false,
    draggable: false,
    autoplay: true,
    autoplaySpeed: 3000,
    fade: true,
    speed: 1000,
    swipe: false,
    touchMove: false,
});

一个循环效果很好，然后就彻底坏掉了，画面闪烁变黑。有谁知道如何解决这个问题？

Answer 1

我能够使用此 Fiddle 中的代码来实现我的目标。我所要做的只是稍微修改一些方法，但这正是我所需要的。

http://jsfiddle.net/pdb4kb1a/2/

JavaScript 归结为：

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;
function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout(slideShow, imgDuration);
}
slideShow();

使用 Slick 在网页上按顺序淡入淡出一系列照片

Making a series of photos fade in and out sequentially on a web page using Slick

javascript

css

jquery

slick.js