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

最新推荐文章于 2022-11-25 15:02:51 发布

程序员_007

最新推荐文章于 2022-11-25 15:02:51 发布

阅读量719

点赞数

分类专栏：实用代码块

实用代码块专栏收录该内容

231 篇文章 0 订阅

订阅专栏

    <!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>