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并进行一点配置： //添加 var t; // endADDED

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或gist，我现在没有时间。如果这不起作用，它可能有事情要做（设置|清除）Interval shenanigans（说实话，我一直只是使用（设置|清除）Timeout（）;）

希望它有所帮助！

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

1 个答案: