Bouton Lecture/Pause pour le diaporama en plein écran

Question

J'apprends mon chemin autour de jquery mais je ne suis pas encore au stade où je peux ajouter mon propre JavaScript. J'ai cherché partout sur Internet pour ajouter un bouton de lecture/pause à mon diaporama en arrière-plan en plein écran. Voici le JavaScript pour le diaporama.

À la votre!

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

J'ajouterais un bouton à la #slideshow HTML, ou en annexe préfixé ne serait pas question (cela suppose que vous commencez avec le jeu diaporama)

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

Ensuite, placez le suivant dans votre 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'); 
} 

et pour la finale, il suffit d'utiliser le code JavaScript suivant et configurer un peu: // AJOUTÉE 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); 
}); 

Je suis désolé si elle est un peu écrit rapidement, j'aurais probablement fait quelques petites choses un peu différentes, mais voulait le faire fonctionner avec/votre code précédent au lieu de simplement vous remettre quelque chose complètement différent sans explication. Si vous voulez, je peux trouver un de mes diaporamas plus tard ce soir que j'ai fait auparavant, et vous lier à un jsfiddle ou à l'essentiel, je n'ai juste pas le temps pour le moment. Si cela ne fonctionne pas, il a probablement quelque chose à faire avec les shenanigans (set | clear) Interval (pour être honnête, j'ai toujours utilisé (set | clear) Timeout();)

Espérons qu'il aide!