首頁 > 其他

花瓣網輪播圖效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   java   color   width   

沒有加上定時器效果，僅僅能手動進行圖片的切換

：



index.html

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



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More