jQuery不褪色爲正確的圖像

Question

我正在創建一個簡單的矩陣樣式幻燈片，四個圖像中的一個圖像淡入到數組中的下一個圖像。與屏幕上位置相關的索引遞增，圖像url的索引增加。在3，我重置imagePosition在0重新啓動，並且當imageUrl索引達到陣列的長度時，我也重置。

然而問題是圖像重置與在那個位置已經存在的圖像相同的圖像。當我登錄網址時，它的不同，但是當我檢查時，dom並沒有更新&鏈接。

我已經嘗試過使用4下的隨機索引，這似乎工作，但我需要它遍歷屏幕上的所有點順序。

fadeToImage每5秒被調用一次並傳遞相同的數組。

（我知道代碼是重複的，去後重構）

var urlArray = ["http://nerdist.com/wp-content/uploads/2016/07/EranGOTGif0007.gif", "https://jimpix.co.uk/ink/ecards/angif_octopus.gif", "http://i.imgur.com/cmefPHy.gif", "http://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1449833420.8507_ePysAs_n.jpg", "https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif", "http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif", "http://67.media.tumblr.com/50af8ed4e4afcc4530c83057db147a91/tumblr_nltc6y6pau1rx5rfmo1_1280.gif"]; 
 

 
setInterval(function() { 
 
    fadeToImage(urlArray); 
 
}, 5000); 
 

 
var cycled = false; 
 
var count = 4; 
 
var imagePosition=0; 
 
function fadeToImage(urlArray) 
 
{ 
 
    if (cycled === false){ 
 
     count = 4; 
 
     imagePosition=0; 
 
     console.log("setting first images") 
 
     $(".display-image-0").attr("style", "background:url(\"" + urlArray[0] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
     $(".display-image-1").attr("style", "background:url(\"" + urlArray[1] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
     $(".display-image-2").attr("style", "background:url(\"" + urlArray[2] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
     $(".display-image-3").attr("style", "background:url(\"" + urlArray[3] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
     cycled = true; 
 
    } else { 
 
     if (imagePosition < 4) { 
 
      console.log(count) 
 
      if (count < urlArray.length) { 
 
       console.log("image position less than 4, count < array", imagePosition, count, urlArray[count]) 
 
       $(".display-image-" + imagePosition).fadeTo(1000, 0, function() { 
 
        $(".display-image-" + imagePosition).attr("style", "background:url(\"" + urlArray[count] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
       }).fadeTo(2000, 1); 
 
       count++; 
 
      } else { 
 
       cycled = false; 
 
      } 
 
      imagePosition++; 
 
     } else { 
 
      imagePosition = 0; 
 
      if (count < urlArray.length) { 
 
       $(".display-image-" + imagePosition).fadeTo(1000, 0, function() { 
 
        $(".display-image-" + imagePosition).attr("style", "background:url(\"" + urlArray[count] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); 
 
       }).fadeTo(2000, 1); 
 
       count++; 
 
      } else { 
 
       cycled = false; 
 
      } 
 
      imagePosition++; 
 
     } 
 
    } 
 
}

.display-image-0 { 
 
    position: fixed; 
 
    left:  0px; 
 
    top:  0px; 
 
    height:  33%; 
 
    width:  50%; 
 

 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
.display-image-1 { 
 
    position: fixed; 
 
    right:  0px; 
 
    top:  0px; 
 
    height:  33%; 
 
    width:  50%; 
 

 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
.display-image-2 { 
 
    position: fixed; 
 
    left:  0px; 
 
    bottom:  0px; 
 
    height:  33%; 
 
    width:  50%; 
 

 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
.display-image-3 { 
 
    position: fixed; 
 
    right:  0px; 
 
    bottom:  0px; 
 
    height:  33%; 
 
    width:  50%; 
 

 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="display-image-0"></div> 
 
<div class="display-image-1"></div><div class="display-image-2"></div> 
 
<div class="display-image-3"></div>

Answer 1

我改變了第二jQuery選擇，在這裏我指定風格屬性，$(this)和它的工作。