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

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，并配置它一点点： // ADDED VAR吨; // 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，我现在没有时间。如果这不起作用，它可能有些事情要做（间隔）（老实说，我一直只使用（set | clear）Timeout（）;）

希望它帮助！