Javascript 在图像幻灯片的幻灯片中更改图像
我需要在图像滑块的幻灯片中更改图像 每张幻灯片包含两张图像,这两张图像将在3秒钟后更改 因此,幻灯片附带第一张图像,3秒钟后,它将第一张图像更改为第二张图像,再过3秒钟(总共6秒钟),当前幻灯片开始播放,下一张幻灯片开始播放 我的想法是使用Javascript 在图像幻灯片的幻灯片中更改图像,javascript,jquery,slideshow,jquery-cycle2,Javascript,Jquery,Slideshow,Jquery Cycle2,我需要在图像滑块的幻灯片中更改图像 每张幻灯片包含两张图像,这两张图像将在3秒钟后更改 因此,幻灯片附带第一张图像,3秒钟后,它将第一张图像更改为第二张图像,再过3秒钟(总共6秒钟),当前幻灯片开始播放,下一张幻灯片开始播放 我的想法是使用setTimeOut函数,并每隔3秒调用另一个映像。 因此,在3秒钟后,第一个图像和第二个图像分别是fadeIn() 我尝试了使用它的循环后和循环前事件: $('.slide .center img:nth-child(2)').hide(); // hide
setTimeOut
函数,并每隔3秒调用另一个映像。
因此,在3秒钟后,第一个图像和第二个图像分别是fadeIn()
我尝试了使用它的循环后
和循环前
事件:
$('.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();
});
但这并不像我预期的那样有效。它不会更改图像,并在next
和prev
按钮上中断。如果您看到控制台,您将看到它不会触发当前幻灯片
感谢您的帮助。编辑:
看起来currSlide还可以,但是由于setTimeOut造成的竞争条件,名称有点错误。看看这个叉子:
我得到的输出:
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如果您检查JavaScript生成的HTML代码,您会注意到Cycle2复制了第一张幻灯片并使其不可见。我无法理解这一点的原因,但至少我们可以轻松地解决它
其次,您应该在
之后的循环中触发淡入/淡出动画。如果在
之前的循环中执行此操作,则当幻灯片放映仍在转换到下一张幻灯片时,设置超时
计数器开始。另一个问题是在
之后的循环中,选项hash.currside
被设置为上一张幻灯片
为了解决所有这些问题,我们必须计算当前可见幻灯片的索引,如下所示:
var visibleSlide = ((optionHash.currSlide + 1) % optionHash.slideCount) + 1;
关于损坏的“上一个/上一个”按钮,实际上应该足以完全停止淡入/淡出动画,并在单击其中一个按钮时将其重置。但是,当单击prev按钮时,必须调整索引计算(-1
而不是+1
,请参见下面的代码)
此外,我们必须在幻灯片放映初始化之后“手动”触发第一张幻灯片的淡入/淡出动画。为此,我们可以使用循环初始化
事件与循环后的逻辑相结合
我想代码可以说上千字,所以我的建议是:
$(".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);
}
是的,但图像仍然不会改变。我需要在每张幻灯片中更改图像。如果我快速点击next/prev按钮,它就会中断。老实说,我不知道如何处理setTimeOut()竞争:-(条件)。在我的情况下,我完全跳过了使用基本滑块(开源和免费)的这种编码。你可以在这里看到一个演示:如果你查看源代码,你会发现第64~95行是滑块代码。我正在从flickr下载动态图片并滑动。如果我从第三张幻灯片到第一张幻灯片,prev
按钮似乎不会触发previus幻灯片动画。此外,如果我将循环初始化
和cy组合在一起cle之后
那么它应该覆盖所有幻灯片?很好,我错过了。更正了这里和小提琴中的索引计算。是的,循环初始化
可以利用循环之后
的逻辑。我现在添加了解决方法(但必须在代码中更改一点)。请参见上文和。