使用javascript使图片重复

Make pictures repeat using javascript

本文关键字：javascript 使用      更新时间：2023-09-26

我想用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()，但我不知道怎么用!

请尝试此代码

保存在脚本部分

 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>

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

if($(this).attr("id")==="img5"){
    $('img').attr("display","block");
}
相关文章：