ループ内のsetTimeoutのフェードアウト？

Question

私はJavascript/Jqueryを学習しています。私はこのループを通過する画像を持っています。トランジション中にイメージがフェードインまたはフェードアウトするようにしたいと思います。 setTimeoutでフェードアウトを追加しようとしましたが、div全体が表示を停止しました。これどうやってするの？ はこれが終了するのも疲れ

var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    myIndex++; 
    if (myIndex > x.length) {myIndex = 1} 
    x[myIndex - 1].style.display = "block"; 
    setTimeout(carousel, 3000); 


} 

HTML ....

<div class="w3-content" style="max-width:2000px;margin-top:46px;"> 
     <div id="images" class="mySlides w3-display-container w3-center"> 
      <img src="~/DisplayImages/training-barbell-muscles-hands-39613.jpeg" style="max-height:950px; width:100%; width:90%; vertical-align: middle;"> 
      <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> 
       <h1>MY TRAINER</h1> 
       <p><b>We had the best time playing at Venice Beach!</b></p> 
      </div> 
     </div> 
     <div class="mySlides w3-display-container w3-center" > 
      <img src="~/DisplayImages/woman-jogger-jogging-sport.jpg" style="max-height:950px; width:90%; vertical-align: middle;"> 
      <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> 
       <h1>MY TRAINER</h1> 
       <p><b>The atmosphere in New York is lorem ipsum.</b></p> 
      </div> 
     </div> 
     <div class="mySlides w3-display-container w3-center"> 
      <img src="~/DisplayImages/breakfast-orange-lemon-oranges.jpg" style="max-height:950px; width:100%; width:90%; vertical-align: middle;"> 
      <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small"> 
       <h1>MY TRAINER</h1> 
       <p><b>Thank you, Chicago - A night we won't forget.</b></p> 
      </div> 
     </div> 
     <div class="w3-container w3-content w3-padding-64" style="max-width:800px; margin-top:950px;" id="contact"> 
      <h2 class="w3-wide w3-center">CONTACT</h2> 
      <div class="w3-row w3-padding-32"> 
       <div class="w3-col m6 w3-large w3-margin-bottom"> 
        <i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br> 
        <i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br> 
        <i class="fa fa-envelope" style="width:30px"> </i> Email: mail@mail.com<br> 
       </div> 
       <div class="w3-col m6"> 
        <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> 
      </div> 
     </div> 
    </div> 
</div> 
     </div> 

Answer 1

https://jsfiddle.net/uw6r6ud1/

var myIndex = 0; 
carousel(); 

function carousel() { 
var i; 
var x = document.getElementsByClassName("mySlides"); 

for (i = 0; i < x.length; i++) { 
    $(x[i]).hide(); 
} 

myIndex++; 

if (myIndex > x.length) { 
    myIndex = 1; 
} 

$(x[myIndex - 1]).stop().fadeIn(600); 

setTimeout(carousel, 3000); 
} 

...私の機能で、申し訳ありません

はこのhttp://api.jquery.com/fadeout/を使用してhttp://api.jquery.com/fadein/