Question

我正在学习Javascript / Jquery。我有图像经历这个循环。我希望图像在过渡期间淡入淡出。我尝试在setTimeout中添加fadeout并且整个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/

循环中setTimeout的淡出？

1 个答案: