全屏背景幻灯片的播放/暂停按钮
我正在学习 jquery,但还没有达到可以添加自己的 JavaScript 的阶段。我在互联网上搜索了一种在全屏背景幻灯片中添加播放/暂停按钮的方法。下面是幻灯片放映的 JavaScript。
干杯!
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
//var $next = $active.next().length ? $active.next()
//: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 0.87}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
I'm learning my way around jquery but I am not yet at the stage where I can add my own JavaScript. I have searched all over the internet for a way to add a play/pause button to my full-screen background-slideshow. Below is the JavaScript for the slideshow.
Cheers!
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
//var $next = $active.next().length ? $active.next()
//: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 0.87}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
我会在 #slideshow HTML 中添加一个按钮,前置或附加都没关系(假设您从播放幻灯片开始)
然后将以下内容放入 CSS 中:
对于结局,只需使用以下 javascript 并将其配置为一点:
//额外
变量t;
//endADDED
如果写得有点快,我深表歉意,我可能会做一些稍微不同的事情,但想让它与您以前的代码一起工作,而不是仅仅给您一些完全不同的东西而不做任何解释。如果你愿意,我可以在今晚晚些时候找到我以前做过的一张幻灯片,并将你链接到它的jsfiddle或要点,我只是现在没有时间。如果这不起作用,它可能与 (set|clear)Interval 恶作剧有关(说实话,我一直只是使用 (set|clear)Timeout(); )
希望它有帮助!
I would add a button to the #slideshow HTML, prepended or appended wouldn't matter (this assumes you start with the slideshow playing)
Then put the following in your CSS:
And for the finale, just use the following javascript and configure it a little bit:
//ADDED
var t;
//endADDED
I apologize if it's a little quickly written, I probably would've done a few things a little different, but wanted to make it work w/ your previous code instead of just handing you something completely different with no explanation. If you want, I can find one of my slideshows later this evening that I've done before, and link you to a jsfiddle or gist of it, I just don't have time at the moment. If this doesn't work, it probably has something to do w/ the (set|clear)Interval shenanigans (to be honest, I've always just used (set|clear)Timeout(); )
Hope it helps!