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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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
php 时间计算问题小结
2009/01/04 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
React实现全选功能
2020/08/25 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python实现进程间通信简单实例
2014/07/23 Python
python求列表交集的方法汇总
2014/11/10 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python实现二叉堆
2016/02/03 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Django 连接sql server数据库的方法
2018/06/30 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python使用smtplib模块发送邮件
2020/12/17 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
财务管理专业应届毕业生求职信
2013/09/22 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
音乐会主持人开场白
2015/05/28 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android