Cycle avance auto Pager avec Pause/Lecture

Question

j'ai réussi à travailler qui pour faire une galerie de téléavertisseur en utilisant le plugin cycle avec l'avance automatique

$(function() { 
$('#s4').before('<div id="nav" class="nav">').cycle({ 
    fx:  'fade', 
    speed: 'slow', 
    timeout: 6000, 
    pager: '#nav', 
    before: function() { if (window.console) console.log(this.src); } 
}); 

});

cependant que cela enlève un certain contrôle à l'utilisateur de sorte qu'il est génial d'ajouter un bouton lecture/pause comme celui-ci (prefereably un bouton) play pause buttons here

j'ai frappé un mur de briques comme mon javaScript codage est faible et je ne suis pas sûr si vous pouvez le faire avec un téléavertisseur

pouvez-vous aider?

grâce

Answer 1

Essayez ceci:

var slides = $('#s4').before('<div id="nav" class="nav"><button id="play_pause" class="pause">Pause</button></nav>') 
.cycle({ 
    fx:  'fade', 
    speed: 'slow', 
    timeout: 6000, 
    pager: '#nav', 
    before: function() { if (window.console) console.log(this.src); } 
});  

$('#pauseButton').click(function() { 
    var obj = $(this); 
    if (obj.hasClass('pause')) { 
     obj.removeClass('pause').addClass('play').text('Play'); 
     slides.cycle('pause'); 
    } else if (obj.hasClass('play')) { 
     obj.removeClass('play').addClass('pause').text('Pause'); 
     slides.cycle('resume'); 
    } 
});