当前位置:编程学习 > C#/ASP.NET >>

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

<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>


这是头部Banner图片切换,有一个问题,当拖动滚动条到下边内容时,切换图片会往上动一下,非常不好,不知道是什么原因导致的,各位帮忙看看,万分感谢! --------------------编程问答-------------------- 还没有人来呀! --------------------编程问答-------------------- --------------------编程问答-------------------- 引用jquery了吗  --------------------编程问答--------------------
引用 3 楼 shiyong7682719 的回复:
引用jquery了吗 


功能是正常的,只是在切换的时候,只是滚动条会动一下。
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,