各位帮忙看一下这个问题是怎么会事，谢谢！

星月神话oO 2013-10-14 10:23:24

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>渐变切换页面顶部图片</title>

    <style type="text/css">

    /* banner */

    #sTop1 {   

        width:1002px;  

        height:97px;

    }  

    #sTop2 {   

        width:1002px;  

        height:97px;  

        position:absolute;  

    }

    #sTop3 {   

        width:1002px;  

        height:97px;  

        position:absolute;  

    } 

    </style>

    <script type="text/javascript" src="../../JS/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

    //Banner图片切换 ccr add 2012-08-01

    $(document).ready(function(){

        var len = 3; //定义图片的数量

        var index = 1;

        var int;

        $("#sTop2").css("left",$("#sTop1").offset().left);

        $("#sTop2").css("top", $("#sTop1").offset().top);

        $("#sTop3").css("left",$("#sTop1").offset().left);

        $("#sTop3").css("top", $("#sTop1").offset().top);

        $("#sTop1").css("background-image",'url(../../Images/top1.png)');

        $("#sTop2").css("background-image",'url(../../Images/top2.png)');  

        $('#sTop2').css('opacity', 0);

        $("#sTop3").css("background-image",'url(../../Images/top3.png)');  

        $('#sTop3').css('opacity', 0);

        function showImg(num) {

            //先把所有的图片隐藏

            for(var i = 1; i <= len; i++) {

                $("#sTop"+i).css({"position":"absolute"});

                $("#sTop"+i).stop().animate({opacity:'0'},0);

            }

            //显示当前下标的图片

            $("#sTop"+num).css({"position":"static"});

            $("#sTop"+num).stop().animate({opacity:'1'},0);

        }

        function autoShowImg() {

            if (index == len + 1) {

                index = 1;

            }

            showImg(index);

            index = index + 1;

        }

        int = setInterval(autoShowImg, 5000);

    });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div style="margin:0px auto; width:1000px; position:">

        <div id="sTop1"></div><div id="sTop2" style="left:0px;"></div><div id="sTop3" style="left:0px;"></div>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    </div>

    </form>

</body>

</html>