JS實現花瓣網輪播圖效果

gxfw 10年前發布 | 2K 次閱讀 JavaScript 

    <!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>  </pre>
 本文由用戶 gxfw 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！