- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>index</title>
- <style>
- body{
- background:#57beb9;
- }
- #main{
- width:920px;
- /*border: 1px solid red;*/
- height:430px;
- overflow:hidden;
- position:relative;
- margin:30px auto;
- }
- #main .box{
- width:820px;
- height:430px;
- box-shadow:0px 0px 5px #ddd;
- margin:0px auto;
- overflow:hidden;
- /*border: 2px solid blue;*/
- position:relative;
- }
- #main .box img{
- width:820px;
- height:430px;
- position:absolute;
- left:0px;
- top:0px;
- opacity:0;
- filter:alpha(opacity=0);
- }
- #main .btnLeft{
- width:35px;
- height:57px;
- position:absolute;
- left:0px;
- top:185px;
- /*border: 1px solid yellow;*/
- background:url(./images/left_ar.png) no-repeat 0px 0px;
- }
- #main .btnRight{
- width:35px;
- height:57px;
- position:absolute;
- right:0px;
- top:185px;
- /* border: 1px solid yellow;*/
- background:url(./images/right_ar.png) no-repeat 0px 0px;
- }
- #main .page{
- width:132px;
- height:22px;
- position:absolute;
- bottom:15px;
- right:50px;
- }
- #main .page a{
- display:inline-block;
- width:22px;
- height:22px;
- background:url(./images/num_grey.png) no-repeat 0px 0px;
- margin:0px 11px;
- float:left;
- color:#FFF;
- text-decoration:none;
- text-align:center;
- }
- #main .page a.active{
- background:url(./images/num_red.png) no-repeat 0px 0px;
- }
- </style>
- <script src1="jquery.js"></script>
- <script>
- $(function(){
- var apage=$('#main .page a');
- var aimg=$('#main .box img');
- var index=0;
- var asize=aimg.size();
- $('#btnLeft').click(function(){
- index--;
- if(index<0){
- index=asize-1;
- document.title=index;
- }
- change();
- })
- $('#btnRight').click(function(){
- index++;
- if(index>asize-1){
- index=0;
- document.title=index;
- }
- change();
- })
- apage.click(function(){
- index=$(this).index();
- change();
- });
- function change(){
- apage.removeClass('active');
- apage.eq(index).addClass('active');
- aimg.eq(index).siblings().stop().animate({
- opacity: 0
- },300)
- aimg.eq(index).stop().animate({
- opacity: 1
- },300)
- }
- })
- </script>
- </head>
- <body>
- <div id="main">
- <a class='btnLeft' id="btnLeft" href="javascript:void(0);"> </a>
- <a class='btnRight' id="btnRight" href="javascript:void(0);"> </a>
- <div class="box">
- <img style="opacity:1;filter:alpha(opacity=100);" src1="./images/intro1.jpg"/>
- <img src1="./images/intro2.jpg"/>
- <img src1="./images/intro3.jpg"/>
- </div>
- <div class='page'>
- <a class='active' href="javascript:void(0);">1</a>
- <a href="javascript:void(0);">2</a>
- <a href="javascript:void(0);">3</a>
- </div>
- </div>
- </body>
- </html>
来源: http://www.phpxs.com/code/1003786/