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 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
php实现上传图片文件代码
2015/07/19 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python实现的读写json文件功能示例
2018/06/05 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python 线程的五个状态
2020/09/22 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
银行内勤岗位职责
2014/04/09 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
步步惊心观后感
2015/06/12 职场文书
学子宴致辞大全
2015/07/27 职场文书