changer les images sur le clic

Question

J'ai trouvé ce code mais je ne veux pas changer au hasard. Je ne sais pas comment changer les images par ordre. S'il vous plaît aidez-moi!

HTML

<div class=change><img id=bg src="items/01.jpg" alt="" /></div> 

JQUERY:

var images = ["02.jpg","03.jpg","01.jpg"]; 

$(function() { 
    $('.change').click(function(e) { 
    var image = images[Math.floor(Math.random()*images.length)]; 
     $('#bg').parent().fadeOut(200, function() { 
      $('#bg').attr('src', 'items/'+image); 
       $(this).fadeIn(200); 
     }); 
    }); 
}); 

Answer 1

Vous devez utiliser index incrémentée par 1 au lieu de hasard. Reset index lorsqu'il atteint la longueur du tableau.

var images = ["02.jpg","03.jpg","01.jpg"]; 

$(function() { 
    index = 0; 
    $('.change').click(function(e) { 
    var image = images[index++]; 
    if(index == images.length) 
     index = 0; 
     $('#bg').parent().fadeOut(200, function() { 
      $('#bg').attr('src', 'items/'+image); 
       $(this).fadeIn(200); 
     }); 
    }); 
}); 

Answer 2

var images = ["01.jpg","02.jpg","03.jpg"]; 
var currentimg = 0; 

$(function() { 
    $('.change').click(function(e) { 

     var image = images[currentimg]; 
     currentimg++; 
     if(currentimg > 2){ 
      currentimg = 0; 
     } 

     $('#bg').parent().fadeOut(200, function() { 
      $('#bg').attr('src', 'items/'+image); 
      $(this).fadeIn(200); 
     }); 
    }); 
}); 

essayer. Cela devrait fonctionner pour vous.