js+css實(shí)現(xiàn)上下翻頁相冊代碼分享

更新時(shí)間：2015年08月18日 14:07:26 投稿：lijiao

這篇文章主要介紹了js+css實(shí)現(xiàn)上下翻頁相冊特效,相冊可以從上方或者下方隨意切換，推薦給大家，有需要的小伙伴可以參考下。

這是一款基于js+css實(shí)現(xiàn)上下翻頁相冊特效代碼，相冊可以從上下兩個(gè)方向進(jìn)行切換，是一款非常實(shí)用的幻燈片特效源碼。
先為大家展示效果圖：

為大家分享的jQuery幻燈片帶縮略圖輪播代碼如下

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <title>js+css實(shí)現(xiàn)上下翻頁相冊</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">&laquo; Previous Picture</a>
  </div>
  <div class="grid_3 omega" id="next">
  <a href="#next">Next Picture &raquo;</a>
  </div>
 </div>
 <!-- relevant for the tutorial - end -->

  
 </body>
</html>

以上就是為大家分享的js+css實(shí)現(xiàn)上下翻頁相冊代碼，希望大家可以喜歡。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
JS獲取動態(tài)添加元素的方法詳解
這篇文章主要介紹了JS獲取動態(tài)添加元素的方法,結(jié)合實(shí)例形式分析了js動態(tài)添加DOM元素及獲取已添加的DOM元素相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
iphone safari不支持position fixed的解決方法
最近一直在做移動web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情
2012-05-05
一個(gè)網(wǎng)頁標(biāo)題title的閃動提示效果實(shí)現(xiàn)思路
通過網(wǎng)頁title來提示用戶有新消息這個(gè)功能很常見，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-03-03
js判斷某個(gè)字符出現(xiàn)的次數(shù)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s判斷某個(gè)字符出現(xiàn)的次數(shù)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
js如何實(shí)現(xiàn)input的賦值
這篇文章主要介紹了js如何實(shí)現(xiàn)input的賦值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
基于js原生和ajax的get和post方法以及jsonp的原生寫法實(shí)例
下面小編就為大家?guī)硪黄趈s原生和ajax的get和post方法以及jsonp的原生寫法實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能,需要的朋友可以參考下
2017-05-05
JS+Canvas實(shí)現(xiàn)滿屏愛心和文字動畫的制作
Canvas?適合繪制大數(shù)據(jù)量圖形元素的圖表（如熱力圖、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等），也適合實(shí)現(xiàn)某些視覺特效。本文就來利用Canvas實(shí)現(xiàn)滿屏愛心和文字動畫的制作，感興趣的可以了解一下
2022-11-11
超贊的動手創(chuàng)建JavaScript框架的詳細(xì)教程
這篇文章主要介紹了動手創(chuàng)建JavaScript框架的詳細(xì)教程,包括DOM和各種屬性的調(diào)試等各個(gè)方面,超級推薦!需要的朋友可以參考下
2015-06-06