在給客戶做產品演示時經常會用到幻燈片，擁有360度的全景圖片效果給用戶帶來好的體驗價值。在這里給大家介紹一款來自Robert Pataki的360全景幻燈實現教程，此款教程使用js來實現一個超酷的全景幻燈，具體內容如下：
在這個教程中沒有使用到任何插件，我們將使用HTML，css和javascript來實現，當然，也使用是jQuery這個框架！
如何實現？
我們將使用預先按照360生成的圖片進行輪播來實現動畫展示效果。包含了180個圖片。所以加載時間可能比較長。
代碼實現
我們將在css代碼中添加media queries，來使得這個效果可以同時在ipad和iphone上實現。
1. 代碼文件
我們添加js，css，圖片目錄。css目錄中包含了reset.css。js中包含了jQuery。代碼文件如下：
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制作幻燈片的全部內容，希望大家喜歡。
新聞熱點
疑難解答
