使用jquery和attr切換img（）

Question

我真的不明白髮生了什麼，它呈現的第一個圖像，並做了fadeIn和fadeOut它是錯誤的。

如果有人可以向我解釋我做錯了什麼，我將不勝感激。

$(document).ready(function() { 
 

 
    var $text01 = $("#text1"); 
 
    var $text02 = $("#text2"); 
 
    var $text03 = $("#text3"); 
 
    var $text04 = $("#text4"); 
 

 
    var $imgController = $("#img-controller"); 
 

 
    var images = ['https://imagizer.imageshack.us/v2/927x637q90/913/D4xyiG.jpg', 'https://imagizer.imageshack.us/v2/333x250q90/673/qVKDU3.jpg'] 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (i + 1 == images.length) { 
 
     $imgController.attr('src', images[i]).fadeOut(4000); 
 
     i = 0; 
 
     $imgController.atrr('src', images[i]).fadeIn(4000); 
 
    } else { 
 
     $imgController.attr('src', images[i]).fadeOut(4000); 
 
     $imgController.attr('src', images[i + 1]).fadeIn(4000); 
 
     i++ 
 
    } 
 
    } 
 

 
})

body { 
 
    color: white; 
 
} 
 
.bg { 
 
    position: fixed !important; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    img { 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
    #text1 { 
 
    position: absolute; 
 
    top: 35%; 
 
    left: 25%; 
 
    font-size: 10em; 
 
    color: $inizio-green; 
 
    p { 
 
     text-shadow: 2px 0px 4px rgba(150, 150, 150, 1); 
 
     -webkit-text-stroke: 1px $primary-color; 
 
    } 
 
    } 
 
    #text2 { 
 
    @extend #text1; 
 
    } 
 
    #text3 { 
 
    @extend #text1; 
 
    } 
 
    #text4 { 
 
    @extend #text1; 
 
    } 
 
} 
 
.container-fluido { 
 
    position: absolute; 
 
    width: 60%; 
 
    top: 20px; 
 
    left: 20%; 
 
    padding: 30px; 
 
    padding-bottom: 0; 
 
    padding-top: 10px; 
 
    background-color: $secondary-color; 
 
    @include opacity(0.7); 
 
} 
 
.img-logo { 
 
    width: 200px; 
 
    height: auto; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.img-background { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    padding-top: 30px; 
 
    li { 
 
    list-style-type: none; 
 
    display: inline; 
 
    padding-left: 40px; 
 
    a { 
 
     text-decoration: none; 
 
     transition: border-bottom linear 0.5s; 
 
     color: $primary-color; 
 
     padding-bottom: 10px; 
 
    } 
 
    a:hover { 
 
     border-bottom: 1px solid $inizio-green; 
 
    } 
 
    } 
 
    li:first-child { 
 
    padding-left: 20%; 
 
    } 
 
} 
 
$primary-color:white; 
 
$secondary-color:#2A2A2A; 
 
$inizio-green:#B7C630;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
<div class="bg"> 
 
    <img id="img-controller" src="https://imagizer.imageshack.us/v2/927x637q90/913/D4xyiG.jpg" /> 
 

 
    <div id="text1"> 
 
    <p>ANTONELLO</p> 
 
    </div> 
 
    <div id="text2"> 
 
    <p>DONATELLO</p> 
 
    </div> 
 
    <div id="text3"> 
 
    <p>BOTTICELLI</p> 
 
    </div> 
 
    <div id="text4"> 
 
    <p>GALILEO</p> 
 
    </div> 
 
</div> 
 
<div class="container-fluido"> 
 
    <div class="row"> 
 
    <div class="navbar"> 
 
     <img class="img-logo" src="http://i58.tinypic.com/15mhjq1.png" /> 
 
     <ul class="menu"> 
 
     <li><a href="#">EMPRESA</a> 
 
     </li> 
 
     <li><a href="#">EMPREENDIMENTOS</a> 
 
     </li> 
 
     <li><a href="#">PORTFÓLIO</a> 
 
     </li> 
 
     <li><a href="#">CONTATO</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    </div> 
 
</div> 
 
<div> 
 
</div>

的代碼也CodePen Playground

謝謝

Answer 1

可能，這將幫助。

images.forEach(function(el, index, arr) { 
$imgController.attr('src', images[i]).fadeOut(4000, function(){ 
    $imgController.attr('src', images[i+1]).fadeIn(4000) 
}); 
}); 

Answer 2

這可能是一個假設，但你在尋找一個循環？您的圖像保持不變的原因是由於即使在第一個fadeOut發生之前運行的foreach，也會立即主動地更改爲陣列中的最新圖像。你可以使用的setInterval使其無限循環：

var i = 1; 
setInterval(function(){ 
    $imgController.fadeOut(2000, function(){ 
     $imgController.attr('src', images[i]).fadeIn(2000, function(){ 
      i++; 
      if(i > (images.length - 1)){ 
       i = 0; 
      } 
     }); 
    }); 
}, 6000); 

下面是一個例子：DEMO

讓我知道如果我是大錯特錯與你想要這個循環。希望這可以幫助！