Arrêter le diaporama sur passage de la souris

J'ai un diaporama, qui oscille entre 3 images différentes qui sont séparés dans un DIV tag. Je veux que lorsque vous placez le pointeur de la souris sur le diaporama, il doit s'arrêter et quand vous prenez la souris hors du diaporama, il devrait continuer à rouler à travers elle.

Le code est ici:

function slideSwitch() {
    var $active = $('#slideshow3 div.active3');
    if ($active.length == 0 ) $active = $('#slideshow3 div:last');

    var $next = $active.next().length ? $active.next() : $('#slideshow3 div:first');
    $active.addClass('last-active3')
    .animate({opacity : 0.0}, 1000);
    $next.css({opacity: 0.0})
        .addClass('active3')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active3 last-active3');
        });
}

J'ai essayé pour les débutants que pour faire quelque chose comme ceci:

$("#slideshow3").mouseover(function(){
    $(this).stop();
    return false;
});

Mais le diaporama ne s'arrête même pas, donc je ne suis certainement pas la cibler correctement ou mettre le code au bon endroit.

Pouvez-vous me donner des suggestions ?

Merci!

  • l'utilisation de la file d'attente et clearQueue au lieu d'arrêter
  • Pouvez-vous s'il vous plaît partager un violon?
  • où en êtes-vous de l'appel de cette fonction ? slideSwitch ?
  • Je suis désolé, j'ai oublié d'inclure l'appel, mais je l'appelle juste en dessous que: $(function(){ setInterval("slideSwitch()", 3000 );
  • Voici le violon: jsfiddle.net/F86jv je n'obtiens pas pourquoi il ne fonctionne pas bien, il a l'air plus ou moins la même que la mienne à côté des images.
InformationsquelleAutor SmalliSax | 2014-01-30
  1. 2

    Vous pouvez stocker vos intervalle de référence dans une variable, puis lorsque vous survolez l'image d'arrêter l'intervalle et lorsque vous quittez le démarrer.

    Code:

    var theInterval;

function startSlide() {
    theInterval = setInterval(slideSwitch, 5000);
}

function stopSlide() {
    clearInterval(theInterval);
}

$(function () {
    startSlide();
    $('#slideshow DIV').hover(function () {
        stopSlide();
    }, function () {
        startSlide();
    })
});

    Démo: http://jsfiddle.net/mucv5/

    • Merci Irvin, exactement ce dont j'avais besoin. L'apprécier 🙂
    InformationsquelleAutor Irvin Dominin