全屏背景幻灯片的播放/暂停按钮

Question

我正在学习如何使用 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 );
});

Answer 1

我会在#slideshow HTML 中添加一个按钮，前置或附加都没有关系（假设您从播放幻灯片开始）

<a class="pause" href="#">Pause</a>

然后将以下内容放入您的 CSS：

#slideshow {
    position: relative;
}
#slideshow a {
    position: absolute;
    top: ##px;
    left: ##px;
    display: none;
    width: ##px;
    height: ##px;
}
#slideshow:hover a {
    display: block;
}
a.pause {
    background-image: url('/path/to/pause.png');
}
a.play {
    background-image: url('/path/to/play.png');
}

最后，只需使用以下 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');
    });
}
//ADDED
//@TODO: this doesn't really account for the possibility that the slideshow wouldn't be playing on page load, it may be better to bind seperate events to .pause and .play, but in general, I think toggle may be more effective.  Another option would be to use click() and just throw in an if statement.
$('#slideshow').find('a').toggle(
    function() {
        $(this).attr('class', 'play');
        t = window.clearInterval(t);
    },
    function() {
        $(this).attr('class', 'pause');
        t = setInterval( "slideSwitch()", 5000 );
    }
);
//endADDED

$(function() {
     t = setInterval( "slideSwitch()", 5000 );
});

如果写得有点快，我深表歉意，我可能会做一些不同的事情，但我想用你以前的代码让它工作，而不是只给你一些完全不同的东西而没有任何解释。如果你愿意，我可以在今晚晚些时候找到我以前做过的幻灯片之一，并将你链接到一个 jsfiddle 或它的要点，我现在没有时间。如果这不起作用，它可能与 (set|clear)Interval 恶作剧有关（老实说，我一直只是使用 (set|clear)Timeout(); ）

希望对你有帮助！