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

accesskey 提交

Jun 26 Javascript

不用写JS也能使用EXTJS视频演示

Dec 29 Javascript

window.onbeforeunload方法在IE下无法正常工作的解决办法

Jan 23 Javascript

JS创建类和对象的两种不同方式

Aug 08 Javascript

JavaScript获取function所有参数名的方法

Oct 30 Javascript

Bootstrap模仿起筷首页效果

May 09 Javascript

Angular 1.x个人使用的经验小结

Jul 19 Javascript

react-native动态切换tab组件的方法

Jul 07 Javascript

js 实现在2d平面上画8的方法

Oct 10 Javascript

浅谈VUE防抖与节流的最佳解决方案(函数式组件)

May 22 Javascript

Vue+axios+WebApi+NPOI导出Excel文件实例方法

Jun 05 Javascript

javascript function(函数类型)使用与注意事项小结

Jun 10 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

Yii2简单实现给表单添加验证码的方法

2016/07/18 PHP

微信公众平台开发-微信服务器IP接口实例（含源码）

2017/03/05 PHP

PHP7修改的函数

2021/03/09 PHP

仿服务器端脚本方式的JS模板实现方法

2007/04/27 Javascript

JQuery入门——事件切换之toggle()方法应用介绍

2013/02/05 Javascript

jquery 漂亮的删除确认和提交无刷新删除示例

2013/11/13 Javascript

jquery让指定的元素闪烁显示的方法

2015/03/17 Javascript

JavaScript设计模式经典之命令模式

2016/02/24 Javascript

JavaScript学习笔记之ES6数组方法

2016/03/25 Javascript

简单实现jQuery上传图片显示预览功能

2020/06/29 jQuery

nodejs取得当前执行路径的方法

2018/05/13 NodeJs

iview Upload组件多个文件上传的示例代码

2018/09/30 Javascript

Python 分析Nginx访问日志并保存到MySQL数据库实例

2014/03/13 Python

用tensorflow构建线性回归模型的示例代码

2018/03/05 Python

python3之模块psutil系统性能信息使用

2018/05/30 Python

django_orm查询性能优化方法

2018/08/20 Python

Django REST framework 视图和路由详解

2019/07/19 Python

用Python解数独的方法示例

2019/10/24 Python

python Matplotlib数据可视化（2）：详解三大容器对象与常用设置

2020/09/30 Python

Python创建简单的神经网络实例讲解

2021/01/04 Python

美国珠宝店：Helzberg Diamonds

2018/10/24 全球购物

新闻编辑自荐信

2013/11/03 职场文书

中学教师管理制度

2014/01/14 职场文书

历史专业学生的自我评价

2014/02/28 职场文书

车辆年审委托书范本

2014/09/18 职场文书

自我查摆剖析材料

2014/10/11 职场文书

毕业设计论文评语

2014/12/31 职场文书

离职信范文

2015/06/23 职场文书

2016小学新学期寄语

2015/12/04 职场文书

小学四年级作文之写景

2019/08/23 职场文书

2021年最新用于图像处理的Python库总结

2021/06/15 Python

如何解决springcloud feign 首次调用100%失败的问题

2021/06/23 Java/Android

python scrapy简单模拟登录的代码分析

2021/07/21 Python

Mysql存储过程、触发器、事件调度器使用入门指南

2022/01/22 MySQL

CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解

2022/04/12 MySQL

win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法

2022/08/05 数码科技