Jak zrobić prosty skrypt slajdów Pauza, gdy ktoś kliknie pokaz slajdów?

Mam pokaz slajdów z filmów z YouTube, który cykluje się z tym skryptem:

setInterval() { 
$('#videoSlides > div:first')
.fadeOut(0)
.next()
.fadeIn(2000)
.end()
.appendTo('#videoSlides');
},  15000);};

HTML w następujący sposób (kontener div, plus 3 dziecko Divs każdy zawierający wbudowany wideo YouTube):

<div id="videoSlides">
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe>
</div>
</div>

Chociaż pokaz slajdów odwraca się między 3 filmami, a ktoś kliknie jeden z filmów, ten pokaz slajdów powinien zatrzymać się tam na tym slajdzie. Jak to zrobić?

0
alloy 14 sierpień 2014, 01:15

3 odpowiedzi

Najlepsza odpowiedź

Podczas gdy inne odpowiedzi wskazują w odpowiednim kierunku, powinieneś być świadomy innej rzeczy: przyciągając wydarzenie Click z wbudowanych graczy YouTube nie jest tak proste, jak sugerowane, ponieważ zdarzenie Click nie jest propagowane poza odtwarzaczem.

Prostym obejściem jest zamiast tego używać zdarzenia MOVEENTER, tak jak:

$('#videoSlides').mouseenter(function() {
    clearInterval(interval);
});

Ale to może nie dać tego zachowania.

Kolejnym bardziej skomplikowanym sposobem na wyjazd jest użycie interfejsu API gracza YouTube, aby złapać zmianę stanu, gdy zaczyna się wideo. Więcej informacji można znaleźć więcej informacji w dokumentach.

Zebrałem przykład jsfiddle (nie zapomnij wstawić identyfikatorów wideo W pierwszej części HTML!)

2
janwschaefer 13 sierpień 2014, 22:21

Proszę bardzo:

var interval=setInterval(function() { 
    $('#videoSlides > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#videoSlides');
}, 15000)};

$('#videoSlides').click(function(){
    clearInterval(interval);
});
0
Amin Jafari 13 sierpień 2014, 21:19

Myślę, o czym pytasz, jest jak powstrzymać interwał z biegania. Aby to zrobić, gdy go ustawisz, przypisz go do zmiennej. Wtedy możesz użyć clearInterval jak więc:

var mySlideShow = window.setInterval(function(){
    [Your transition code]
}, 15000);

//on click
window.clearInterval(mySlideShow);
0
idrumgood 13 sierpień 2014, 21:20