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

Change images in a slide of an image slideshow

本文关键字：图像 幻灯片      更新时间：2023-09-26

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

每张幻灯片包含两个图像，这些图像将在 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。

任何帮助，不胜感激。

如果你检查JavaScript生成的HTML代码，你会发现Cycle2复制了第一张幻灯片，并使其不可见。原因超出了我的范围，但至少我们可以很容易地解决它。

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

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

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

关于损坏的上一个/后退按钮，实际上应该足以完全停止淡入/淡出动画并在单击其中一个按钮时重置它。但是，当单击prev按钮时，必须调整索引计算（-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）

编辑：

似乎 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

源语言

它正在工作。随机单击上一个和下一个按钮后从我的控制台输出：

// 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。

相关文章：