编程 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 相关文章推荐

火狐浏览器(firefox)下获得Event对象以及keyCode

Nov 13 Javascript

js动态设置鼠标事件示例代码

Oct 30 Javascript

分享一则JavaScript滚动条插件源码

Mar 03 Javascript

jQuery版本升级踩坑大全

Jan 12 Javascript

微信小程序 canvas API详解及实例代码

Oct 08 Javascript

Bootstrap Img 图片样式(推荐)

Dec 13 Javascript

jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】

Apr 11 jQuery

layui上传图片到服务器的非项目目录下的方法

Sep 26 Javascript

JavaScript数组排序功能简单实现

May 14 Javascript

JS实现网站楼层导航效果代码实例

Jun 16 Javascript

javascript实现贪吃蛇游戏（娱乐版）

Aug 17 Javascript

vue等两个接口都返回结果再执行下一步的实例

Sep 08 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实现简单实用的验证码类

2015/07/29 PHP

php使用curl通过代理获取数据的实现方法

2016/05/16 PHP

ExtJs grid行右键菜单的两种方法

2010/06/19 Javascript

基于jQuery的星级评分插件

2011/08/12 Javascript

javascript suggest效果自动完成实现代码分享

2012/02/17 Javascript

使用jQuery实现的网页版的个人简历(可换肤)

2013/04/19 Javascript

JS关闭窗口或JS关闭页面的几种代码分享

2013/10/25 Javascript

jQuery提示效果代码分享

2014/11/20 Javascript

JavaScript获取页面中表单（form）数量的方法

2015/04/03 Javascript

用javascript实现自动输出网页文本

2015/07/30 Javascript

js代码实现随机颜色的小方块

2015/07/30 Javascript

JavaScript学习笔记之取数组中最大值和最小值

2016/03/23 Javascript

JS+Canvas 实现下雨下雪效果

2016/05/18 Javascript

JS实现回到页面顶部动画效果的简单实例

2016/05/24 Javascript

Angular实现的简单定时器功能示例

2017/12/28 Javascript

vue.js中npm安装教程图解

2018/04/10 Javascript

详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）

2020/07/21 Javascript

快速解决vue2+vue-cli3项目ie兼容的问题

2020/11/17 Vue.js

[01:29]2017 DOTA2国际邀请赛官方英雄手办展示

2017/03/18 DOTA

[36:52]DOTA2真视界：基辅特锦赛总决赛

2017/05/21 DOTA

Python深入学习之上下文管理器

2014/08/31 Python

python3.6数独问题的解决

2019/01/21 Python

django 读取图片到页面实例

2020/03/27 Python

世界上最值得信赖的多日游在线市场：TourRadar

2018/07/20 全球购物

办公室主任先进事迹

2014/01/18 职场文书

护士自我评价

2014/02/01 职场文书

婚假请假条怎么写

2014/04/10 职场文书

求职信结尾怎么写

2014/05/26 职场文书

总经理人事任命书

2014/06/05 职场文书

同学聚会策划方案

2014/06/06 职场文书

校园绿化美化方案

2014/06/08 职场文书

审计局班子四风对照检查材料思想汇报

2014/10/07 职场文书

芙蓉镇观后感

2015/06/10 职场文书

周一问候语大全

2015/11/10 职场文书

HR必备：销售经理聘用合同范本

2019/08/21 职场文书

Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)

2021/05/24 Python