如何選擇陣列圖像淡入淡出

var n=0; 
 
var images=["FullSizeRender (1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"]; 
 

 
$(document).ready(function() { 
 
\t 
 
\t // Change image 
 
\t 
 
\t $("#himg").click(function(){ 
 
\t \t n++; 
 
\t \t 
 
\t \t if(n==images.length){ 
 
\t \t \t n=0; 
 
\t \t }; 
 
\t \t 
 
\t \t document.getElementById("himg").src=images[n]; 
 
\t \t 
 
\t \t $("#himg").find('img[src="' + images[n] + '"]').fadeOut(); 
 
\t \t $("#himg").find('img[src="' + images[n+1] + '"]').hide().fadeIn(); 
 
\t \t 
 
\t });

<div class="col-xs-2"> 
 
\t <div id="handbags"> 
 
\t \t <h4>Handbags</h4> 
 
\t   <img id="himg" src="FullSizeRender (1).jpg" /> 
 
\t </div> 
 
</div>

我已經在那裏圖片上點擊更改數組，但我想，使圖像上點擊褪色的急劇變化來代替。我嘗試使用數組中的索引來選擇圖像，但它不起作用。

來源

2017-06-24 MullerA

什麼叫「選擇」圖像是什麼意思？你基本上想要： 1.淡出一個圖像，然後 2.淡入新的一個？還是你想讓它們淡入/同時？ – jayongg

我想淡出一個然後淡入另一個。問題是選擇數組@jayongg中的圖像。 – MullerA

爲什麼Night下面寫的解決方案沒有工作？目前還不清楚你選擇的意思。你看起來像是在上面正確地編入數組。 'image [n]'和'images [n + 1]'來選擇陣列中適當索引處的圖像。 – jayongg

試試這個：

$(document).ready(function() { 
    var n = 0; 
    var images = ["FullSizeRender(1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"]; 
    var image = $('#himg'); 

    image.on('click', function() { 
     var newN = n+1; 
     if (newN >= images.length) { newN = 0 }; 
     image.attr('src', images[n]); 
     image.fadeOut(300, function() { 
      image.attr('src', images[newN]); 
      image.fadeIn(); 
      n = newN; 
     }); 
    }); 
});

來源

2017-06-24 19:25:29 jayongg

你可以做到這一點很容易與此：

$(document).ready(function() { 
    var n = 0; 
    var images = ["FullSizeRender(1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"]; 
    var image = $('img'); // Your selector 

    image.on('click', function() { 
     image.fadeOut(); 
     image.attr('src', images[n]); 
     image.fadeIn(); 
     if (n == images.length-1) { n = 0 } else { n++ }; 
    }); 
});

來源

2017-06-24 18:08:44 Night

謝謝，但這不是我的問題;請重新閱讀我的問題;我在問如何使圖像淡出和進入。 – MullerA

哦，對不起，您需要添加時間參數和回調函數，您需要更改src。像這樣：image.fadeOut（300，function（）{// change image}） – Night

試試我的新解決方案。希望我明白你想要做什麼。 – jayongg

如何選擇陣列圖像淡入淡出

回答

相關問題