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">« 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實(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獲取動(dòng)態(tài)添加元素的方法,結(jié)合實(shí)例形式分析了js動(dòng)態(tài)添加DOM元素及獲取已添加的DOM元素相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
iphone safari不支持position fixed的解決方法
最近一直在做移動(dòng)web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情2012-05-05
一個(gè)網(wǎng)頁標(biāo)題title的閃動(dòng)提示效果實(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的賦值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(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)表單動(dòng)態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能,需要的朋友可以參考下2017-05-05
JS+Canvas實(shí)現(xiàn)滿屏愛心和文字動(dòng)畫的制作
Canvas?適合繪制大數(shù)據(jù)量圖形元素的圖表（如熱力圖、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等），也適合實(shí)現(xiàn)某些視覺特效。本文就來利用Canvas實(shí)現(xiàn)滿屏愛心和文字動(dòng)畫的制作，感興趣的可以了解一下2022-11-11
超贊的動(dòng)手創(chuàng)建JavaScript框架的詳細(xì)教程
這篇文章主要介紹了動(dòng)手創(chuàng)建JavaScript框架的詳細(xì)教程,包括DOM和各種屬性的調(diào)試等各個(gè)方面,超級(jí)推薦!需要的朋友可以參考下2015-06-06