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

jquery批量控制form禁用的代码

Aug 06 Javascript

jquery ajax属性async(同步异步)示例

Nov 05 Javascript

JSON无限折叠菜单编写实例

Dec 16 Javascript

JavaScript实现节点的删除与序号重建实例

Aug 05 Javascript

cocos2dx骨骼动画Armature源码剖析(一)

Sep 08 Javascript

jQuery 全选全不选事件绑定的实现代码

Jan 23 Javascript

js模拟微博发布消息

Feb 23 Javascript

关于jQuery.ajax()的jsonp碰上post详解

Jul 02 jQuery

ECMAScript6变量的解构赋值实例详解

Sep 19 Javascript

JS实现字符串去重及数组去重的方法示例

Apr 21 Javascript

最后说说Vue2 SSR 的 Cookies 问题

May 25 Javascript

BootstrapValidator实现表单验证功能

Nov 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实现12306火车票余票查询和价格查询(12306火车票查询)

2014/01/14 PHP

CI框架验证码CAPTCHA辅助函数用法实例

2014/11/05 PHP

php字符串替换函数substr_replace()用法实例

2015/03/17 PHP

详解PHP5.6.30与Apache2.4.x配置

2017/06/02 PHP

PHP中cookie知识点学习

2018/05/06 PHP

php的命名空间与自动加载实现方法

2019/08/25 PHP

使用jQuery的ajax功能实现的RSS Reader 代码

2009/09/03 Javascript

输入自动提示搜索提示功能的javascript:sugggestion.js

2013/09/02 Javascript

在JS方法中返回多个值的方法汇总

2015/05/20 Javascript

js禁止页面刷新与后退的方法

2015/06/08 Javascript

JavaScript实现cookie的写入、读取、删除功能

2015/11/05 Javascript

JavaScript函数学习总结以及相关的编程习惯指南

2015/11/16 Javascript

Vuejs第十一篇组件之slot内容分发实例详解

2016/09/09 Javascript

详解ECharts使用心得总结

2016/12/06 Javascript

使用Bootstrap美化按钮实例代码(demo)

2017/02/03 Javascript

JavaScript实现的XML与JSON互转功能详解

2017/02/16 Javascript

JavaScript学习笔记之DOM操作实例分析

2019/01/08 Javascript

Vue2.0 实现页面缓存和不缓存的方式

2019/11/12 Javascript

推荐几个不错的console调试技巧实现

2019/12/20 Javascript

vue Treeselect下拉树只能选择第N级元素实现代码

2020/08/31 Javascript

python2 与python3的print区别小结

2018/01/16 Python

Linux下Python安装完成后使用pip命令的详细教程

2018/11/22 Python

在Python中使用Neo4j的方法

2019/03/14 Python

python MD5加密的示例

2020/10/19 Python

python利用文件时间批量重命名照片和视频

2021/02/09 Python

HearthSong官网：儿童户外玩具、儿童益智玩具

2017/10/16 全球购物

职业培训师职业生涯规划

2014/02/18 职场文书

股东协议书

2014/04/14 职场文书

《中国梦我的梦》小学生演讲稿

2014/08/20 职场文书

自我检讨报告

2015/01/28 职场文书

公务员年终个人总结

2015/02/12 职场文书

军事博物馆观后感

2015/06/05 职场文书

《植树问题》教学反思

2016/03/03 职场文书

幼儿园教师辞职信

2019/06/21 职场文书

Python快速优雅的批量修改Word文档样式

2021/05/20 Python

python树莓派通过队列实现进程交互的程序分析

2021/07/04 Python