1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery外掛-360度旋轉產品照片展示

jQuery外掛-360度旋轉產品照片展示

2015/10/07

梅問題-jQuery外掛-360度旋轉產品照片展示

  以前相當流行利用Flash來製作360度的產品展示,讓使用者可以直接按住滑鼠,拖拉產品就可看到360度的產品照片,讓使用者可以在虛擬的頁面中,了解到實體產品的各角度的變化,但自從老賈開始打Flash後,現在Flash已消聲匿跡,因此目前比較好的作法,就是透過jQuery的方式來製作,而最近正好有朋友,想製作360度的產品展示功能,所以梅干就尋找了一下,發現到一款相當簡易且好用的360度產品展示的外掛,且套用還相當的簡單,因此有需要的朋友,也趕快來看看囉!


準備素材:
當要開始製作時,要先將360度的產品照片拍好。
梅問題-jQuery外掛-360度旋轉產品照片展示


Step1
首先,將css放到<head>….</head>間。

<link rel="stylesheet" type="text/css" href="css/pic360.css"/>

Step2
首先,將js放到到</body>前。

<script src="js/jquery-1.4.4.js"></script>
<script src="js/pic360-1.0.0.js"></script>

Step3
當要使用時,將div的類別名稱加入PIC360,接著把要360度的產品照,一一的加到ul li中。

<div class="PIC360">
 
<ul>
  
<li><img width="700" height="466" src="images/01.jpg" /></li>
  
<li><img width="700" height="466" src="images/02.jpg" /></li>
   ………….
 
</ul>
</div>

Step4
當完成後,只要滑鼠游標,在區域內由左向右滑動時,產品照片就會跟著旋轉,而這邊梅干只是簡易拍攝,當要顯示跟細膩時,可用專用的拍攝器,以及張數愈多效果愈好,是不是很簡單呀!有需要的朋友,不妨也可參考看看囉!
梅問題-jQuery外掛-360度旋轉產品照片展示


[範例預覽] [範例下載]