js精美的幻灯片画集特效代码分享


Posted in Javascript onAugust 29, 2015

本文实例讲述了js制作精美的幻灯片画集特效。分享给大家供大家参考。具体如下:
这是一款基于javascript制作的精美幻灯片画集特效的插件,跟其他幻灯片有别的图片画廊。为什么说有所区别呢,因为这款插件的图片切换时包含4个方向的,即上下左右切换也是可以的,大家可以在实例中进行使用。
运行效果图:-------------------查看效果 下载源码-------------------

js精美的幻灯片画集特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

本实例的关键代码:

var o = {
 init: function(){
 this.portfolio.init();
 },
 portfolio: {
 data: {
 },
 init: function(){
  $('#portfolio').portfolio(o.portfolio.data);
 }
 }
}
 
$(function(){ o.init(); });

为大家分享的js精美的幻灯片画集特效代码如下

<!doctype html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js精美的幻灯片画集特效</title>
 <link rel="shortcut icon" href="../favicon.ico">
 <meta name="description" content="Portfolio Image Navigation with jQuery" />
 <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
 <meta name="author" content="Marcin Dziewulski for Codrops" />
 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/portfolio.js" type="text/javascript"></script>
 <script src="js/init.js" type="text/javascript"></script>
 </head>
 <body>
 
 <div id="portfolio">
 <div id="background"></div> 
 <div class="arrows">
 <a href="#" class="up">Up</a>
 <a href="#" class="down">Down</a>
 <a href="#" class="prev">Previous</a>
 <a href="#" class="next">Next</a>
 </div>
 <div class="gallery">
 <div class="inside">
 <div class="item">
 <div><img src="images/1.jpg" alt="image1" /></div>
 <div><img src="images/2.jpg" alt="image2" /></div>
 <div><img src="images/3.jpg" alt="image3" /></div>
 </div>
 <div class="item">
 <div><img src="images/4.jpg" alt="image4" /></div>
 <div><img src="images/5.jpg" alt="image5" /></div>
 </div>
 <div class="item">
 <div><img src="images/6.jpg" alt="image6" /></div>
 <div><img src="images/7.jpg" alt="image7" /></div>
 <div><img src="images/8.jpg" alt="image8" /></div>
 <div><img src="images/9.jpg" alt="image9" /></div>
 <div><img src="images/10.jpg" alt="image10"/></div>
 <div><img src="images/11.jpg" alt="image11"/></div>
 </div>
 <div class="item">
 <div><img src="images/12.jpg" alt="image12"/></div>
 <div><img src="images/13.jpg" alt="image13"/></div>
 <div><img src="images/14.jpg" alt="image14"/></div>
 <div><img src="images/15.jpg" alt="image15"/></div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>

以上就是为大家分享的js精美的幻灯片画集特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jQuery的框架介绍
May 11 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
You might like
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python写入中英文字符串到文件的方法
2015/05/06 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python和php哪个更适合写爬虫
2020/06/22 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
cf收人广告词大全
2014/03/14 职场文书
骨干教师考核方案
2014/05/09 职场文书
节能环保口号
2014/06/12 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
红十字会救护培训简讯
2015/07/20 职场文书