Créer un intervalle de changer d'image en jQuery?

J'ai un travail de script comme ceci:

jQuery(document).ready(function(){

    $('.video-thumb img').bind('mouseover',function(){
        var new = $(this).attr('src').replace(/default.jpg/,'1.jpg');
        $(this).attr('src',new);
    }).bind('mouseout',function(){
        var default = $(this).attr('src').replace(/[0-9].jpg/,'default.jpg');
        $(this).attr('src',default);
    });

});

Oui, vous avez deviné. Elle est faite pour changer de YouTube miniature sur l'intervalle. Cependant, je n'ai aucune idée, comment créer de l'intervalle. Il passe maintenant sur la vignette pour 1.jpg qui est une autre miniature, mais il convient ensuite de modifier l'image 2.jpg en 1 seconde et ainsi de suite.

L'ensemble de l'extrait devrait probablement être écrit à partir de zéro. Des conseils?

Espère que vous avez compris 😀

EDIT: j'ai changé la variable de noms à partir des mots en finnois, je ne les utilise pas. Tout dans cet exemple.

Martti Laine

OriginalL'auteur Martti Laine | 2010-07-05

  1. 8

    nouveau et par défaut sont les mots réservés en javascript. Vous ne pouvez pas les utiliser.

    Pour créer un intervalle, vous devez utiliser setInterval:

    setInterval(function() {
  //do something
  //...
}, 1000); //<- 1000ms = 1s

    [Le voir en action]

    jQuery(document).ready(function() {

    var timer, imgsrc, cnt = 0;

    $('.video-thumb img').bind('mouseover', function() {

      //if there is no timer
      if (!timer) {

        var $t = $(this);

        //get the image src
        imgsrc = $t.attr('src').replace('default.jpg','');

        //start a new timer
        timer = setInterval(function() {

          //periodically change the src
          $t.attr('src', imgsrc + (cnt+1) + ".jpg");

          //and adjust the counter
          cnt = ( cnt + 1 ) % 3; //0, 1, 2

        }, 1000); //<- 1000ms = 1s
      }
    }).bind('mouseout',function() {

      //stop rotation
      if (timer) {
        clearInterval(timer);
        timer = null;
      }

      //set the default img
      $(this).attr('src', imgsrc + 'default.jpg');
    });
});

    OriginalL'auteur gblazex

  2. 3

    Vous pouvez voir ma réponse qui travaillent ici:

    HTML

    <div class="video-thumb"> 
    <img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" />
</div>
<div id="counter">0</div>​

    JavaScript

    $(document).ready(function() {

    var images = [];

    images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg";
    images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg";
    images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg";
    images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg";
    images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg";
    images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg";

    var loop;
    var i = 0;

    var counter = $("#counter");

    $('.video-thumb img').mouseover(function() {
        var image = this;
        loop = setInterval(function() {
            if (i < images.length - 1) {
                i++;
                $(image).attr('src',images[i]);
            } else {
                i = 0;
                $(image).attr('src',images[i]);
            } 
            counter.html(i);
        }, 1000); 

    }).mouseout(function() {
        clearInterval(loop);
        i = 0;
        $(this).attr('src', images[i]);
        counter.html(i);
    });

});

    OriginalL'auteur GerManson

  3. 0
     var newImg = $(this).attr('src').replace(/default.jpg/,'1.jpg');
 $(this).attr('src',newImg);
 window.setTimeout(function(){
     newImg = $(this).attr('src').replace(/1.jpg/,'2.jpg');
     $(this).attr('src',newImg);
 },1000);

    OriginalL'auteur Piskvor

  4. 0

    Merci les gars pour les réponses grands! (Onu)heureusement, j'ai déjà créé via jQuery Minuteurs-plugin. Voici mon code de travail:

    $j(document).ready(function(){

    $j('.video-thumb img').bind('mouseover',function(){
        var c = 1;
        $j(this).everyTime(1000,'interval',function(i){
            $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,c+'.jpg'));
            if(c<3) {
                c++;
            } else {
                c = 1;
            }
        });
    }).bind('mouseout',function(){
        $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,'default.jpg'));
        $j(this).stopTime('interval');
    });

});

    OriginalL'auteur Martti Laine