编程 Javascript

js+css实现上下翻页相册代码分享

Posted in Javascript onAugust 18, 2015

这是一款基于js+css实现上下翻页相册特效代码，相册可以从上下两个方向进行切换，是一款非常实用的幻灯片特效源码。
先为大家展示效果图：

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实现上下翻页相册代码，希望大家可以喜欢。

js+css实现上下翻页相册代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

juqery 学习之三选择器可见性元素属性

Nov 25 Javascript

offsetHeight在OnLoad中获取为0的现象

Jul 22 Javascript

node.js中的emitter.emit方法使用说明

Dec 10 Javascript

纯jquery实现模仿淘宝购物车结算

Aug 20 Javascript

简单谈谈Javascript中类型的判断

Oct 19 Javascript

Javascript中字符串相关常用的使用方法总结

Mar 13 Javascript

JS与jQuery实现子窗口获取父窗口元素值的方法

Apr 17 jQuery

layui表格checkbox选择全选样式及功能的实例

Mar 07 Javascript

解决Mac安装thrift因bison报错的问题

May 17 Javascript

vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

Aug 25 Javascript

Vue 之孙组件向爷组件通信的实现

Apr 23 Javascript

JavaScript实现网页动态生成表格

Nov 25 Javascript

javascript实现图片上传前台页面

Aug 18 #Javascript

jquery使用ul模拟select实现表单美化的方法

Aug 18 #Javascript

jQuery实现的漂亮表单效果代码

Aug 18 #Javascript

jquery实现select下拉框美化特效代码分享

Aug 18 #Javascript

js实现iPhone界面风格的单选框和复选框按钮实例

Aug 18 #Javascript

JS+DIV+CSS实现仿表单下拉列表效果

Aug 18 #Javascript

js模拟淘宝网的多级选择菜单实现方法

Aug 18 #Javascript

You might like

php压缩HTML函数轻松实现压缩html/js/Css及注意事项

2013/01/27 PHP

PHP程序员常见的40个陋习,你中了几个？

2014/11/20 PHP

php获取从百度、谷歌等搜索引擎进入网站关键词的方法

2015/07/08 PHP

php mysql获取表字段名称和字段信息的三种方法

2016/11/13 PHP

PHP截取发动短信内容的方法

2017/07/04 PHP

CentOS7系统搭建LAMP及更新PHP版本操作详解

2020/03/26 PHP

PHP扩展类型及安装方式解析

2020/04/27 PHP

js(jQuery)获取时间的方法及常用时间类搜集

2013/10/23 Javascript

Nodejs实现的一个简单udp广播服务器、客户端

2014/09/25 NodeJs

JavaScript运行机制之事件循环(Event Loop)详解

2014/10/10 Javascript

原生js和jQuery随意改变div属性style的名称和值

2014/10/22 Javascript

js实现同一页面多个运动效果的方法

2015/04/10 Javascript

微信小程序教程系列之视图层的条件渲染（10）

2017/04/19 Javascript

Angular4实现鼠标悬停3d倾斜效果

2017/10/25 Javascript

详解vue-cli 本地开发mock数据使用方法

2018/05/29 Javascript

详解.vue文件解析的实现

2018/06/11 Javascript

微信小程序学习笔记之文件上传、下载操作图文详解

2019/03/29 Javascript

解决vue跨域axios异步通信问题

2019/04/17 Javascript

vue单文件组件无法获取$refs的问题

2020/06/24 Javascript

如何使用RoughViz可视化Vue.js中的草绘图表

2021/01/30 Vue.js

[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片

2014/12/01 DOTA

python解析html提取数据，并生成word文档实例解析

2018/01/22 Python

基于Django URL传参 FORM表单传数据 get post的用法实例

2018/05/28 Python

Django进阶之CSRF的解决

2018/08/01 Python

python读取指定字节长度的文本方法

2019/08/27 Python

Python做图像处理及视频音频文件分离和合成功能

2020/11/24 Python

python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境

2020/12/14 Python

HTML5和CSS3实例教程总结(推荐)

2016/07/18 HTML / CSS

CSS3 画基本图形，圆形、椭圆形、三角形等

2016/09/20 HTML / CSS

移动端Html5中百度地图的点击事件

2019/01/31 HTML / CSS

美国最大的网上冲印店：Shutterfly

2017/01/01 全球购物

机电专业体育教师求职信

2013/09/21 职场文书

招商经理岗位职责

2013/11/16 职场文书

企业授权委托书范本

2014/09/22 职场文书

工作作风建设心得体会

2014/10/22 职场文书

护士医德医风心得体会

2016/01/25 职场文书