gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:46:05 25 4
gpt4 key购买 nike

我需要在图像 slider 幻灯片更改图像。

每张幻灯片包含两张图片,它们会在 3 秒后发生变化。

所以,幻灯片带有第一张图片,3 秒后它将第一张图片更改为第二张图片,再过 3 秒(总共 6 秒),当前幻灯片开始播放,下一张幻灯片开始播放。

我的想法是使用 setTimeOut 函数,每 3 秒调用另一个图像。所以 3 秒后 fadeOut() 第一个图像和 fadeIn() 第二个。

我尝试使用 cycle2及其 cycle-aftercycle-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

但这并不像我预期的那样有效。它不会更改图像,并且会在 nextprev 按钮上中断。如果您看到控制台,您会发现它不会触发当前幻灯片

感谢任何帮助。

最佳答案

如果您检查由 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)

关于javascript - 更改图像幻灯片的幻灯片中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19585607/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com