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

Javascript !!的作用

Dec 04 Javascript

js过滤数组重复元素的方法

Sep 05 Javascript

修复ie8&chrome下window的resize事件多次执行

Oct 20 Javascript

JS格式化数字保留两位小数点示例代码

Oct 15 Javascript

JavaScript中eval函数的问题

Jan 31 Javascript

使用three.js 画渐变的直线

Jun 05 Javascript

vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

Feb 08 Javascript

jQuery实现简单的回到顶部totop功能示例

Oct 16 jQuery

JS实现全屏预览F11功能的示例代码

Jul 23 Javascript

Vue 组件参数校验与非props特性的方法

Feb 12 Javascript

JS实现可视化音频效果的实例代码

Jan 16 Javascript

vuex分模块后,实现获取state的值

Jul 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

超外差式晶体管收音机的组装与统调

2021/03/01 无线电

php基础知识:类与对象(4) 范围解析操作符(::)

2006/12/13 PHP

PHP 获取文件权限函数介绍

2013/07/11 PHP

PHP多个文件上传到服务器实例

2014/10/29 PHP

php表单敏感字符过滤类

2014/12/08 PHP

thinkphp如何获取客户端IP

2015/11/03 PHP

Laravel框架路由和控制器的绑定操作方法

2018/06/12 PHP

Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例

2020/04/04 PHP

利用jQuery的$.event.fix函数统一浏览器event事件处理

2009/12/21 Javascript

基于jquery的返回顶部效果（兼容IE6）

2011/01/17 Javascript

jQuery使用数组编写图片无缝向左滚动

2012/12/11 Javascript

node.js开机自启动脚本文件

2014/12/24 Javascript

个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节

2015/06/10 Javascript

jquery.validate提示错误信息位置方法

2016/01/22 Javascript

jquery通过name属性取值的简单实现方法

2016/06/20 Javascript

浅谈Angular的$q, defer, promise

2016/12/20 Javascript

微信小程序开发入门基础教程

2017/04/19 Javascript

五步轻松实现JavaScript HTML时钟效果

2020/03/25 Javascript

node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

2018/01/12 Javascript

vue router的基本使用和配置教程

2018/11/05 Javascript

vue 使用外部JS与调用原生API操作示例

2019/12/02 Javascript

关于angular 8.1使用过程中的一些记录

2020/11/25 Javascript

vue实现轮播图帧率播放

2021/01/26 Vue.js

python发布模块的步骤分享

2014/02/21 Python

python隐藏终端执行cmd命令的方法

2019/06/24 Python

Python正则表达式匹配数字和小数的方法

2019/07/03 Python

利用Python实现手机短信监控通知的方法

2019/07/22 Python

python实现的爬取电影下载链接功能示例

2019/08/26 Python

Tensorflow中的降维函数tf.reduce_*使用总结

2020/04/20 Python

Scrapy模拟登录赶集网的实现代码

2020/07/07 Python

matplotlib图例legend语法及设置的方法

2020/07/28 Python

HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图

2015/08/31 HTML / CSS

凯撒娱乐：Caesars Entertainment

2018/02/23 全球购物

个人政治思想总结

2015/03/05 职场文书

Python 如何实现文件自动去重

2021/06/02 Python

Java 垃圾回收超详细讲解记忆集和卡表

2022/04/08 Java/Android