javascript制作幻灯片(360度全景图片)


Posted in Javascript onJuly 28, 2015

在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值。在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下:

在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架!

如何实现?

我们将使用预先按照360生成的图片进行轮播来实现动画展示效果。包含了180个图片。所以加载时间可能比较长。

代码实现

我们将在css代码中添加media queries,来使得这个效果可以同时在ipad和iphone上实现。

1. 代码文件

我们添加js,css,图片目录。css目录中包含了reset.css。js中包含了jQuery。代码文件如下:

javascript制作幻灯片(360度全景图片)

2.  新的项目

创建一个HTML文件index.html。在<head>中我们设置了移动设备的viewport,使得内容不支持缩放。添加俩个文件

reset.css和threesixty.css。包含了自定义的css样式。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
</body>
</html>

3. 加载进度条

创建一个<div>来容纳幻灯。其中包含一个<ol>,用来包含图片序列<li>,同时也包含了一个<span>来显示进度条。我们将使用javascript来动态加载图片。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
</body>
</html>

4. 添加互动

代码最后,我们添加jQuery用来处理互动,threesixity.js用来处理图片幻灯。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
<scriptsrc="js/heartcode-canvasloader-min.js"></script>
<scriptsrc="js/jquery-1.7.min.js"></script>
<scriptsrc="js/threesixty.js"></script>
</body>
</html>

5. 样式

我们添加threesixty.css文件。reset.css用来设置缺省的样式。首先定义#threesixty包装。缺省的图片幻灯是960x450。水平垂直居中。

#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p

以上内容就是应用javascript制作幻灯片的全部内容,希望大家喜欢。

Javascript 相关文章推荐
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
js实现导航跟随效果
Nov 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 #Javascript
javascript解决IE6下hover问题的方法
Jul 28 #Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
详解JavaScript ES6中的Generator
Jul 28 #Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 #Javascript
JavaScript调用客户端Java程序的方法
Jul 27 #Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
prototype1.4中文手册
2006/09/22 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
装饰活动策划方案
2014/02/11 职场文书
合理化建议书
2015/02/04 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
使用Java去实现超市会员管理系统
2022/03/18 Java/Android