Question

我想用JavaScript创建动画。

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

我想要的是：pic1＆gt; pic2＆gt; pic3＆gt; pic4＆gt; pic5＆gt; pic1＆gt; ...

代码：

<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（）但我不知道如何！

Answer 1

请尝试此代码

在脚本部分

中进行此操作

 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>

Answer 2

你所做的一切都是通过淡出来隐藏所有图像，但从不让它们再次可见。在函数suivante（）的开头添加以下代码：

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

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

}

使用javascript重复制作图片

2 个答案: