编程 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 表单进行客户端验证demo

Aug 24 Javascript

JQuery 给元素绑定click事件多次执行的解决方法

Sep 09 Javascript

jQuery仅用3行代码实现的显示与隐藏功能完整实例

Oct 08 Javascript

基于javascript制作微博发布栏效果

Apr 04 Javascript

javascript读取文本节点方法小结

Dec 15 Javascript

使用axios实现上传图片进度条功能

Dec 21 Javascript

详解自定义ajax支持跨域组件封装

Feb 08 Javascript

vue2.0+ 从插件开发到npm发布的示例代码

Apr 28 Javascript

vue实现组件之间传值功能示例

Jul 13 Javascript

vue给组件传递不同的值方法

Sep 29 Javascript

小程序选项卡以及swiper套用（跨页面）

Jun 19 Javascript

vue祖孙组件之间的数据传递案例

Dec 07 Vue.js

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日期处理函数整型日期格式

2011/01/12 PHP

php中限制ip段访问、禁止ip提交表单的代码分享

2014/08/22 PHP

js实现按Ctrl+Enter发送效果

2014/09/18 Javascript

jQuery自定义添加"$"与解决"$"冲突的方法

2015/01/19 Javascript

使用angularjs创建简单表格

2016/01/21 Javascript

jQuery实现的精美平滑二级下拉菜单效果代码

2016/03/28 Javascript

快速掌握jQuery插件开发

2017/01/19 Javascript

Angular2使用Guard和Resolve进行验证和权限控制

2017/04/24 Javascript

Vue2路由动画效果的实现代码

2017/07/10 Javascript

vue生成随机验证码的示例代码

2017/09/29 Javascript

node.js调用C++函数的方法示例

2018/09/21 Javascript

vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

2018/10/29 Javascript

Vue项目使用localStorage+Vuex保存用户登录信息

2019/05/27 Javascript

Vue组件实现触底判断

2019/06/26 Javascript

在vue中利用全局路由钩子给url统一添加公共参数的例子

2019/11/01 Javascript

js prototype深入理解及应用实例分析

2019/11/25 Javascript

原生js实现日历效果

2020/03/02 Javascript

[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀

2014/06/20 DOTA

5款非常棒的Python工具

2018/01/05 Python

解决pycharm运行程序出现卡住scanning files to index索引的问题

2019/06/27 Python

在HTML5中如何使用CSS建立不可选的文字

2014/10/17 HTML / CSS

群众路线教育实践活动方案

2014/02/02 职场文书

人资专员岗位职责

2014/04/04 职场文书

市场部经理岗位职责

2014/04/10 职场文书

交通事故调解协议书

2014/04/16 职场文书

伊琍体标语

2014/06/25 职场文书

国防教育标语

2014/10/08 职场文书

教育项目合作协议书格式

2014/10/17 职场文书

党员带头倡议书

2015/04/29 职场文书

2015年纪委工作总结

2015/05/13 职场文书

企业年会祝酒词

2015/08/11 职场文书

在酒桌上的敬酒词

2015/08/12 职场文书

企业文化学习心得体会

2016/01/21 职场文书

喜迎建国70周年：有关爱国的名言名句

2019/09/24 职场文书

《英雄联盟》2022日蚀、月蚀皮肤演示黑潮亚索曝光

2022/04/13 其他游戏

Python 操作pdf pdfplumber读取PDF写入Exce

2022/08/14 Python