點擊更改圖片

Question

我發現此代碼，但我不想隨意更改。 我不知道如何改變圖像的順序。 請幫幫我！

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

您需要使用index 1，而不是隨意增加。 Reset當它達到數組長度時的索引。

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); 
     }); 
    }); 
}); 

試試這個。這應該適合你。