banner切换

效果图：
View Code
<head runat="server">
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.cycle.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $('#banner').cycle({
                fx: 'scrollLeft',
                pager: '#btn'
            });
        })
    </script>
    <style type="text/css">
        #banner
        {
            width: 980px;
            margin: 0px auto;
            height: 210px;
            overflow: hidden;
            z-index: -1;
        }
        #btn
        {
            display: inline;
            width: 110px;
            hegiht: 18px;
            float: left;
            margin: -30px 0px 0px 865px;
            position: absolute;
            z-index: 1;
        }
        #btn a
        {
            color: #36f;
            font: 700 11px "Arial";
            background: url(/Images/ibbtn.gif) no-repeat;
            float: left;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            text-decoration: none;
            margin-left: 5px;
        }
        #btn a.activeSlide
        {
            color: #fff;
            background: url(/Images/ibhbtn.gif) no-repeat;
        }
        #btn a:hover
        {
            color: #fff;
            background: url(/Images/ibhbtn.gif) no-repeat;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="banner">
        <img src="/Images/ibanner1.jpg" width="980" height="210">
        <img src="/Images/ibanner2.jpg" width="980" height="210">
        <img src="/Images/ibanner3.jpg" width="980" height="210">
        <img src="/Images/ibanner4.jpg" width="980" height="210">
    </div>
    <div id="btn">
    </div>
    </form>
</body>
</html>
http://jquery.malsup.com/cycle/