Problème mouseover clearinterval

Nuaj Hocei
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon slideshow.

<script>
$(document).ready(function() {
  setInterval(slider, 1000);
  var i = 1;

  function slider() { 
   i = $('input[name=radio-set]:checked').attr('id');
      //Essayer d'obtenir l'identifiant du contrôle   
   i = (parseInt(i.slice(-1)) % 4)+1;
      //Obtenir le nombre en tant qu'élément d'id puis augmenter 1   
   $('#bouton-' + i).prop('checked', true);
      //Vérification comme ci-dessus
  }
});
</script>

Quand j'ajoute ceci, il se base sur les "checked", c'est a dire les puces de navigations, en fait il ne glisse pas, il choisi tout simplement la puce à côté, ce qui fait changer l'image.
Ce n'est pas un probleme en sois, cependant, j'aimerais ajouter une fonction de mouseover, qui arrete le "défilement des images".

J'ai essayé ceci:

function stopSlide(){
clearInterval(slider)
}

$(".contenu").mouseover(function() {
stopSlide()
});

Et encore d'autre chose que j'essai d'adapter, sois tout s'arrête, sois rien ne fonctionne.
Mon niveau en Jquey, javascript et proche de 0 ahah, j'aimerais qu'on me guide le plus simplement possible, sur ce qui ne va pas, ce qui pourrait collé a mon Jquery deja fonctionnel (celui qui se sers des puces), pour que quand je passe la souris sur le slideshow, les puces et les images arrete de défilé.

Voici le codepen du slideshow, vous pourrez peu etre y voir plus clair:

Codepen du slideshow ICI

Merci d'avance pour vos réponses ! Il n'y a qu'ici ou je trouve un peu de lumiere :)

6 réponses

keulu
Réponse acceptée

un setInterval te retourne qqch

var interval = setInterval(slider, 1000);

clearinterval(interval)

Nuaj Hocei
Auteur

Bonjour Keulu !
T'es génial ! sa fonctionne ! C'était simple en fait et je suis passer a côté une dizaine de fois, voici mon code maintenant:

<script>
$(document).ready(function() {
 var interval = setInterval(slider, 8000);
  var i = 1;

  function slider() { 
   i = $('input[name=radio-set]:checked').attr('id');
      //Essayer d'obtenir l'identifiant du contrôle   
   i = (parseInt(i.slice(-1)) % 4)+1;
      //Obtenir le nombre en tant qu'élément d'id puis augmenter 1   
   $('#bouton-' + i).prop('checked', true);
      //Vérification comme ci-dessus
  }

    function stopSlide(){
clearInterval(interval)
}
$(".contenu").mouseover(function() {
stopSlide()
});
});   <-- c'est bon sa ? j'ai un doute, si je l'enleve sa ne fonctionne plus..

</script>

Il me reste un probleme, le hover cest super, sa s'arrête. Mais sa ne reprend pas ^^
Je crois avoir vu le code du .mouseout lors de mes précedente recherches.

Merci pour ta réponses trés précise !

Nuaj Hocei
Auteur

J'ai trouver tout seul :) j'ai ajouter ceci :

$(".contenu").mouseleave(function() {
slider()});

Et sa repars la ou l'interval c'était arreter.

Je passe le sujet en résolu, mais je reste a l'écoute, pouvez vous me dire les erreurs de syntaxe.

Merci !

Nuaj Hocei
Auteur

J'ai un nouveau probleme en fait, quand je passe la souris sur les fleches ou les bulles de navigations de mon slideshow, sa fait comme si sa cliqué. Une piste du pourquoi ?

keulu

}); <-- c'est bon sa ? j'ai un doute, si je l'enleve sa ne fonctionne plus..

oui ca ferme ton $(document).ready(function() {

mais faut mieux indenter ton code, parce que sinon tu va t'y perdre.

essaye comme ca :

$(".contenu").mouseover(function(event) {
event.preventDefault()
stopSlide()
});
Nuaj Hocei
Auteur

Ok je vois c'est déja un peu plus beau a regardé et a lire.

tu saurais me dire pourquoi il ne se relance pas une fois le mouseleave?
si je met le dernier bout de code du commentaire précedent, des que je passe la souris sur les input ou les fleches prec/suiv il change d'image tout seul.

J'ai essayé sa

function resumSlide(){
setInterval(interval)}
$(".contenu").mouseout(function(event){
event.preventDefault()
resumSlide()});

Mais quand la souris quitte le slideshow, c'est la mitraillette de défilement, il devient fou.