Question

我需要在图片滑块的幻灯片中更改图片 。

每张幻灯片都包含两张图片，这些图片会在3秒后更改。

因此，幻灯片附带第一张图片，3秒钟后将第一张图片更改为第二张图片，再过3秒钟（总共6秒钟），当前幻灯片开始播放，下一张幻灯片播放。

我的想法是使用setTimeOut功能并每隔3秒调用另一张图像。因此，第一张图片需要3秒fadeOut()，第二张图片为fadeIn()。

我使用cycle2及其cycle-after和cycle-before事件尝试了此操作：

$('.slide .center img:nth-child(2)').hide(); // hide all slides second images $('#slides').cycle({ fx: 'scrollHorz', slides: '>.slide', timeout: 6000, prev: '#prev', next: '#next' }); $('#slides').on('cycle-before', function(event, optionHash){ setTimeout(function(){ $('.slide:eq('+optionHash.currSlide+') > .center > img:first-child').fadeOut(1000); console.log($('.slide:eq('+(optionHash.currSlide)+')').attr('slideNum')); },1000) setTimeout(function(){ $('.slide:eq('+optionHash.currSlide+') > .center > img:nth-child(2)').fadeIn(); console.log($('.slide:eq('+(optionHash.currSlide)+')').attr('slideNum')); },2000) }); $('#slides').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { $('.center img:first-child',outgoingSlideEl).show(); $('.center img:nth-child(2)',outgoingSlideEl).hide(); });

JSFiddle

但这不符合我的预期。它不会更改图像，它会在next和prev按钮上中断。如果您看到控制台，您会看到它触发 current slide。

感谢任何帮助。

Answer 1

如果您检查JavaScript生成的HTML代码，您会注意到Cycle2复制了第一张幻灯片并使其不可见。造成这种情况的原因超出了我的意见，但至少我们可以轻松解决这个问题。

其次，您应该在cycle-after中触发淡入/淡出动画。如果在cycle-before中完成此操作，setTimeout计数器会在幻灯片显示仍在转换到下一张幻灯片时开始。另一个问题是，在cycle-after中，optionHash.currSlide设置为上一张幻灯片...

为了解决所有这些问题，我们必须计算当前可见幻灯片的索引，如下所示：

var visibleSlide = ((optionHash.currSlide + 1) % optionHash.slideCount) + 1;

关于破碎的上一个/后一个按钮，它实际上应该足以完全停止淡入/淡出动画并在单击其中一个按钮时重置它。但是，单击上一步按钮时，必须调整索引计算（-1而不是+1，请参阅下面的代码。）

此外，我们必须在幻灯片放映初始化后立即为第一张幻灯片“手动”触发淡入/淡出动画。为此，我们可以将cycle-initialized事件与cycle-after中的逻辑结合使用。

我猜代码说了千言万语，所以这是我的建议：

$(".slide img:nth-child(2)").hide();

// Workaround for first slide right after initialization
// Handler has to be set before initialization, otherwise it might never be called!
$("#slides").on("cycle-initialized", function(event, optionHash){
    // Pretend the slideshow just transitioned from the last slide to the first
    onCycleAfter(optionHash.slideCount-1, optionHash.slideCount);
});

$("#slides").cycle({
    fx: "scrollHorz",
    slides: ".slide",
    timeout: 6000,
    prev: "#prev",
    next: "#next"
});

var timeout, prevClicked = false;
$("#slides").on("cycle-after", function(event, optionHash){
    onCycleAfter(optionHash.currSlide, optionHash.slideCount);
});

$("#slides").on("cycle-prev", function(){
    prevClicked = true;
});

function onCycleAfter(currSlide, slideCount) {
    // Reset slides
    $(".slide img:first-child").show();
    $(".slide img:nth-child(2)").hide();

    // Reset animation
    clearTimeout(timeout);
    $(".slide img").finish();

    // Calculate current slide (with workaround for prev button)
    var visibleSlide;
    if (prevClicked) {
        visibleSlide = ((currSlide - 1 + slideCount) % slideCount) + 1;
        prevClicked = false;
    }
    else {
        visibleSlide = ((currSlide + 1) % slideCount) + 1;
    }

    // Trigger new animation
    timeout = setTimeout(function(){
        var slideImages = $(".slide").eq(visibleSlide).find("img");
        slideImages.eq(0).fadeOut(1000, function(){
            slideImages.eq(1).fadeIn(1000);
        });
    }, 1000);
}

DEMO (JSFiddle)

Answer 2

编辑：

似乎currSlide还可以，但由于setTimeOut引起的竞争条件，名称错误。请参阅此分支：http://jsfiddle.net/pMX7D/3/

我得到的输出：

1=> fadeIN /_display/ (line 63)
second /_display/ (line 56)
2=> fadeOut /_display/ (line 57)
second /_display/ (line 62)
2=> fadeIN 

// 3 never gets focus

原始

它正在发挥作用。在prev和下一个按钮上随机点击后从我的控制台输出：

// first or second = slide data I beileve
[cycle2] --c2 init--
jquery....min.js (line 7) 
first
/vucko...5/show/ (line 56)
first
/vucko...5/show/ (line 61)
[cycle2] cycle-next
jquery....min.js (line 7)
first
/vucko...5/show/ (line 56)
[cycle2] cycle-next
jquery....min.js (line 7)
first
/vucko...5/show/ (line 61)
second
/vucko...5/show/ (line 56)
[cycle2] cycle-prev
jquery....min.js (line 7)
second
/vucko...5/show/ (line 61)
[cycle2] cycle-prev
jquery....min.js (line 7)
first
/vucko...5/show/ (line 56)
second

我正在使用： Windows中的Firefox 16.0.2 。

更改图像幻灯片幻灯片中的图像

2 个答案:

编辑：

原始