编程 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事件绑定on()、bind()与delegate() 方法详解

Jun 03 Javascript

javaScript中push函数用法实例分析

Jun 08 Javascript

使用javascript提交form表单方法汇总

Jun 25 Javascript

基于javascript实现图片预加载

Jan 05 Javascript

基于bootstrop常用类总结(推荐)

Sep 11 Javascript

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

Aug 02 Javascript

原生JS实现的自动轮播图功能详解

Dec 28 Javascript

微信 jssdk 签名错误invalid signature的解决方法

Jan 14 Javascript

Vue列表如何实现滚动到指定位置样式改变效果

May 09 Javascript

原生js实现分页效果

Sep 23 Javascript

JavaScript构造函数原理及实现流程解析

Nov 19 Javascript

js用正则表达式筛选年月日的实例方法

Jan 04 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中比较简单的导入phpmyadmin生成的sql文件的方法

2011/06/28 PHP

MySQL 日期时间函数常用总结

2012/06/12 PHP

php命令行使用方法和命令行参数说明

2014/04/08 PHP

PHP基于GD库的缩略图生成代码（支持jpg,gif,png格式）

2014/06/19 PHP

javascript new fun的执行过程

2010/08/05 Javascript

web前端开发也需要日志

2010/12/09 Javascript

js将控件隐藏的方法及display属性介绍

2013/07/04 Javascript

js实现动态添加、删除行、onkeyup表格求和示例

2013/08/18 Javascript

javascript 弹出的窗口返回值给父窗口具体实现

2013/11/23 Javascript

让input框实现类似百度的搜索提示(基于jquery事件监听)

2014/01/31 Javascript

JS 打印功能代码可实现打印预览、打印设置等

2014/10/31 Javascript

JavaScript里实用的原生API汇总

2015/05/14 Javascript

javascript框架设计之种子模块

2015/06/23 Javascript

jQuery Mobile 和 Kendo UI 的比较

2016/05/05 Javascript

jquery插件uploadify多图上传功能实现代码

2016/08/12 Javascript

Javascript typeof与instanceof的区别

2016/10/18 Javascript

Vue原理剖析实现双向绑定MVVM

2017/05/03 Javascript

Angular 作用域scope的具体使用

2017/12/11 Javascript

vuex state中的数组变化监听实例

2019/11/06 Javascript

[02:36]DOTA2混沌骑士英雄基础教程

2013/11/26 DOTA

python基础教程之Hello World!

2014/08/29 Python

Python中urllib2模块的8个使用细节分享

2015/01/01 Python

Linux系统上Nginx+Python的web.py与Django框架环境

2015/12/25 Python

python list排序的两种方法及实例讲解

2017/03/20 Python

Python实现获取邮箱内容并解析的方法示例

2018/06/16 Python

Python在OpenCV里实现极坐标变换功能

2019/09/02 Python

django自定义模板标签过程解析

2019/12/14 Python

Keras使用ImageNet上预训练的模型方式

2020/05/23 Python

Python中zipfile压缩文件模块的基本使用教程

2020/06/14 Python

html5使用canvas绘制文字特效

2014/12/15 HTML / CSS

芬兰灯具网上商店：Nettilamppu.fi

2018/06/30 全球购物

幼儿园毕业家长感言

2014/02/10 职场文书

2014年度个人总结范文

2015/03/09 职场文书

自主招生学校推荐信范文

2015/03/26 职场文书

职工趣味运动会开幕词

2016/03/04 职场文书

Flutter Navigator 实现路由传递参数

2022/04/22 Java/Android