JS实现花瓣网轮播图效果(未测试)

来源：互联网发布：电脑监控软件有哪些编辑：程序博客网时间：2024/04/29 05:41
    <!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 src="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);" src="./images/intro1.jpg"/>                                   <img src="./images/intro2.jpg"/>                      <img src="./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>
0 0