使用javascript使图片重复

我想用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>

img{
位置：绝对位置；
中心：0px；
顶部：0px；
}
#img3{z-索引：3；}
#img2{z-索引：2；}
#img1{z-索引：1；}
$（函数（）{
$（'img'）.first（）.fadeOut（2000，函数suivante（））{
$（this）.next（'img'）.fadeOut（2000年，suivante）；
});
});

我发现我应该使用bis（）函数，但我不知道如何使用

请尝试此代码

在脚本部分保留此选项

 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>

var image1=新图像（）
image1.src=“images/1.jpg”
var image2=新图像（）
image2.src=“images/2.jpg”
var image3=新图像（）
image3.src=“images/3.jpg”
var image4=新图像（）
image4.src=“images/4.jpg”
var image5=新图像（）
image5.src=“images/5.jpg”
var image6=新图像（）
image6.src=“images/6.jpg”
var image7=新图像（）
image7.src=“images/7.jpg”

您所做的就是通过淡出隐藏所有图像，但永远不会使它们再次可见。在函数suivante（）的开头添加以下代码：

---

如果要使所有图片消失，更好的方法是使用

fadeIn

和

fadeOut

使它们可见。只显示最后一张图像，然后消失

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

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

}