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

JSON+JavaScript处理JSON的简单例子

Mar 20 Javascript

Javascript selection的兼容性写法介绍

Dec 20 Javascript

浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

Jan 09 Javascript

javascript实现百度地图鼠标滑动事件显示、隐藏

Apr 02 Javascript

JavaScript生成福利彩票双色球号码

May 15 Javascript

让html元素随浏览器的大小自适应垂直居中的实现方法

Oct 12 Javascript

jQuery DOM节点的遍历方法小结

Aug 15 jQuery

vue实现form表单与table表格的数据关联功能示例

Jan 29 Javascript

学习RxJS之JavaScript框架Cycle.js

Jun 17 Javascript

package.json配置文件构成详解

Aug 27 Javascript

layui操作列按钮个数和文字颜色的判断实例

Sep 11 Javascript

vue点击当前路由高亮小案例

Sep 26 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

基于qmail的完整WEBMAIL解决方案安装详解

2006/10/09 PHP

php提示undefined index的几种解决方法

2012/05/21 PHP

使用php实现截取指定长度

2013/08/06 PHP

PHP单例模式定义与使用实例详解

2017/02/06 PHP

PHP设计模式之委托模式定义与用法简单示例

2018/08/13 PHP

Laravel中10个有用的用法小结

2019/05/06 PHP

解决php extension 加载顺序问题

2019/08/16 PHP

ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例

2020/02/07 PHP

PHP中关于php.ini参数优化详解

2020/02/28 PHP

在js文件中如何获取basePath处理js路径问题

2013/07/10 Javascript

浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

2014/01/09 Javascript

html的DOM中document对象forms集合用法实例

2015/01/21 Javascript

js采用concat和sort将N个数组拼接起来的方法

2016/01/21 Javascript

javascript实现平滑无缝滚动

2020/08/09 Javascript

老生常谈JavaScript数组的用法

2016/06/10 Javascript

jQuery基本选择器之标签名选择器

2016/09/03 Javascript

vuejs2.0实现一个简单的分页示例

2017/02/22 Javascript

Vue AST源码解析第一篇

2017/07/19 Javascript

Koa2微信公众号开发之本地开发调试环境搭建

2018/05/16 Javascript

el-select数据过多懒加载的解决(loadmore)

2019/05/29 Javascript

[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名

2014/07/11 DOTA

使用python获取CPU和内存信息的思路与实现(linux系统)

2014/01/03 Python

python实现百万答题自动百度搜索答案

2018/01/16 Python

python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案

2020/02/18 Python

python编程进阶之异常处理用法实例分析

2020/02/21 Python

Python semaphore evevt生产者消费者模型原理解析

2020/03/18 Python

Pytorch转tflite方式

2020/05/25 Python

如何用Python进行时间序列分解和预测

2021/03/01 Python

英国著名的化妆品折扣网站：Allbeauty.com

2016/07/21 全球购物

墨西哥巴士车票在线购买：ClickBus

2018/03/27 全球购物

歌唱比赛主持词

2014/03/18 职场文书

我的中国梦演讲稿800字

2014/08/19 职场文书

党的群众路线教育实践活动领导班子整改措施

2014/10/28 职场文书

安全员岗位职责范本

2015/04/11 职场文书

html5移动端禁止长按图片保存的实现

2021/04/20 HTML / CSS

深入理解以DEBUG方式线程的底层运行原理

2021/06/21 Java/Android