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实现上下翻页相册代码,希望大家可以喜欢。

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