Question

我试图制作一个使用jQuery淡入淡出的幻灯片，但是我似乎无法让它去我的代码中出错了，或者你们还有其他任何捷径来完成这项工作吗？有没有其他方法可以淡入淡出并淡出幻灯片？

  <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    <!--
    #wrap {
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: 375px;
        width: 960px;
        overflow: hidden;
    }
    #wrap img {
        display: none;
    }
    #wrap .is-showing {
        display: inline;
    }

    -->
    </style>


    </head>
    <body>

        <div id="wrap">
            <img src="images/image1.jpg" width="960" height="375" alt="image 1" class="is-showing" />
            <img src="images/image2.jpg" width="960" height="375" alt="image 2" class="is-showing" />
            <img src="images/image3.jpg" width="960" height="375" alt="image 3" class="is-showing" />
        </div>
    <script type="text/javascript" src="jquery-1.11.1min.js" </script>
    <script type="text/javascript">
        $(document).ready(function() {
        slideshow();

        });

        function slideshow() {
            var showing = $('#Wrap .is-showing');
            var next = showing.next().length ? showing.next () ; showing.parent().children(':first');

        showing.fadeout(800, function() { next.fadeIn(800).addClass('.is-showing'); }).removeClass('.is-showing');

        setTimeout(slideshow, 2500);

        }


    </script>
    </body>
    </html>

Answer 1

你的slideshow函数有很多错误，包括拼写错误，并且不是很经常。不过，它在正确的轨道上：

function slideshow() {
    var showing = $('#wrap > .is-showing');
    var next;
    if (showing.length === 3) {
        next = showing.parent().children(':first');
        showing.hide();
        showing.removeClass("is-showing");
        next.show();
        next.addClass("is-showing");
    } else {
        next = showing.next();
        next = next.length ? next : next = showing.parent().children(':first');
        showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');
    }
    setTimeout(slideshow, 2500);
}

有没有人知道我的代码是什么错误我试图制作一个褪色的幻灯片？

1 个答案: