js+css實現上下翻頁相簿代碼分享_javascript技巧

來源:互聯網
上載者:User

 這是一款基於js+css實現上下翻頁相簿特效代碼,相簿可以從上下兩個方向進行切換,是一款非常實用的投影片特效源碼。
 先為大家展示效果圖:

效果示範 源碼下載

為大家分享的jQuery投影片帶縮圖輪播代碼如下

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>js+css實現上下翻頁相簿</title>  <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head>  <body> <div class="container_12" id="wrapper"> <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />  <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery">  <div id="pictures">  <img src="images/picture1.png" alt="" />  <img src="images/picture2.png" alt="" />  <img src="images/picture3.png" alt="" />  <img src="images/picture4.png" alt="" />  <img src="images/picture5.png" alt="" />  </div>    <div class="grid_3 alpha" id="prev">  <a href="#previous">« Previous Picture</a>  </div>  <div class="grid_3 omega" id="next">  <a href="#next">Next Picture »</a>  </div> </div> <!-- relevant for the tutorial - end -->   </body></html>

以上就是為大家分享的js+css實現上下翻頁相簿代碼,希望大家可以喜歡。

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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