我正在尝试构建一个图像幻灯片,该幻灯片在停止后淡入第一张图像,但我不明白。有人会这么好心地指出我的解决方案吗?
这是代码:http ://codepen.io/peterschmidler/pen/hFHtJ
非常感谢!
附言
我正在尝试构建一个图像幻灯片,该幻灯片在停止后淡入第一张图像,但我不明白。有人会这么好心地指出我的解决方案吗?
这是代码:http ://codepen.io/peterschmidler/pen/hFHtJ
非常感谢!
附言
代码:http ://codepen.io/anon/pen/zJFcj
if (context.hasClass("stopshow")) {
next = context.find('.images img:first');
stopshow = true;
}else{
next = next.length ? next : context.find('.images img:first');
}
在这里,我们只是检查类stopshow
是否存在,并使用一个简单的if
语句来操作我们对next
.
然后在动画回调中,我们只在stopshow
变量不为真时重复
if(!stopshow) filesCrossfade(context)
为什么要重新发明轮子?试试著名的 jQuery 循环幻灯片插件。它是轻量级的,适用于移动设备,非常容易实现,并且有许多非常有用的自定义选项。见这里。
$(document).ready(function(){
function filesCrossfade(context) {
if (context.hasClass("stopshow")) {
context.find('.images img.active').removeClass('active').delay(500).fadeOut(500);
context.find('.images img:first').addClass('active').delay(500).fadeIn(500);
return;
}
if (context.find('.images img').length > 1) {
var active = context.find('.images img.active');
var next = active.next();
next = next.length ? next : context.find('.images img:first');
active.removeClass('active').delay(500).fadeOut(500);
next.addClass('active').delay(500).fadeIn(500, function() {
filesCrossfade(context) });
}
}
$(".content .slideshow").each(function(){
$(this).find('.images img').hide();
$(this).find('.images img').eq(0).fadeIn(500);
});
filesCrossfade($(".content .slideshow").eq(0));
$('.stop').click(function(){
$(".content .slideshow").eq(0).addClass("stopshow");
});
});