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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
js右键菜单效果代码
Jul 21 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
mailto的使用技巧分享
Dec 21 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
小程序实现五星点评效果
Nov 03 Javascript
详解JavaScript中的坐标和距离
May 27 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
微博短链接算法php版本实现代码
2012/09/15 PHP
php反射应用示例
2014/02/25 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JS中跳出循环的示例代码
2017/09/14 Javascript
js中url对象化管理分析
2017/12/29 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python MD5文件生成码
2009/01/12 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
天网面试题
2013/04/07 面试题
专科应届毕业生求职信
2014/06/04 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
预备党员半年考察意见
2015/06/01 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle