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)和它的工作。