效果图：
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>