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实现页面加载时弹出对话框代码
Apr 19 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 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清除字符串中所有无用标签的方法
2014/12/01 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
寒假实习自荐信
2014/01/26 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
创业大赛策划书
2014/03/01 职场文书
秸秆管理实施方案
2014/03/15 职场文书
活动策划求职信模板
2014/04/21 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书