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

问题描述

| 我正在学习有关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 );
});

    

解决方法

        我会在#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或要点，我现在没有时间。如果这不起作用，则可能与（set | clear）Interval恶作剧有关系（老实说，我一直只使用（set | clear）Timeout（）;） 希望能帮助到你！