0

我想使用 JavaScript 创建动画。

图片应该重复（循环），问题是当脚本到达最终图片时有一个空白空间。

我想要的是： pic1 > pic2 > pic3 > pic4 > pic5 > pic1 > ...

编码：

<style type="text/css">
    img { 
        position: absolute; 
        center: 0px; 
        top: 0px; 
    }

    #img3 { z-index: 3; }
    #img2 { z-index: 2; }
    #img1 { z-index: 1; }
</style>

<img style="top: 0px; height: 199px;" src="img1.jpg" id="img1">
<img img2.jpg" id="img2"><img src="img3.jpg" id="img3">


<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(function() {
        $('img').first().fadeOut(2000, function suivante() {
            $(this).next('img').fadeOut(2000,suivante);
        });
    });
</script>

我发现我应该使用函数 bis() 但我不知道如何！

4

2 回答 2

0

请尝试此代码

保留在脚本部分

 var image1 = new Image()
    image1.src = "images/1.jpg"
    var image2 = new Image()
    image2.src = "images/2.jpg"
    var image3 = new Image()
    image3.src = "images/3.jpg"
    var image4 = new Image()
    image4.src = "images/4.jpg"
    var image5 = new Image()
    image5.src = "images/5.jpg"
    var image6 = new Image()
    image6.src = "images/6.jpg"
    var image7 = new Image()
    image7.src = "images/7.jpg"



<img src="images/1.jpg" name="slide" style="float:left;padding-right:10px;height:100px;width:250px" />
                 <script>
        <!--
            //variable that will increment through the images
            var step = 1
            function slideit() {
                //if browser does not support the image object, exit.
                if (!document.images)
                    return
                document.images.slide.src = eval("image" + step + ".src")
                if (step < 7)
                    step++
                else
                    step = 1
                //call function "slideit()" every 2.5 seconds
                setTimeout("slideit()", 2000)
            }
            slideit()
        //-->
        </script>
于 2013-05-13T08:53:10.363 回答
0

您所做的只是通过淡出隐藏所有图像，但不再使它们可见。在函数 suivante() 的开头添加以下代码：

if($(this).attr("id")==="img5"){

    $('img').attr("display","block");

}
于 2013-05-13T09:06:34.550 回答