首頁  >  文章  >  web前端  >  jQuery實現的產品自動360度旋轉展示特效源碼分享_jquery

jQuery實現的產品自動360度旋轉展示特效源碼分享_jquery

WBOY
WBOY原創
2016-05-16 15:43:481768瀏覽

這是一款基於jQuery實現的產品自動360度旋轉展示特效代碼,可以對產品進行360度旋轉展示,更好的讓顧客了解產品的全部外觀細節。

jQuery產品360度旋轉展示代碼,支援預加載,能夠快速全面的的預覽產品的圖片,主要原理是利用多張圖片按順序播放實現,本段代碼兼容目前最新的各類主流瀏覽器,是一款非常優秀的特效源碼。

運行效果圖:---------------------------------效果查看 原始碼下載-----------------------------------

為大家分享的jQuery實現的產品自動360度旋轉展示特效程式碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery产品360度旋转展示代码</title>
<link href="360show.css" rel="stylesheet" type="text/css">

<script src="jquery.min.js"></script>
<script type="text/javascript" src="360show.js" ></script>
</head>
<body>
<div id="box-wrapper">
 <div class="box-control box-control-left"><a title="顺时针转动" href="javascript:void(0)" class="prev" id="prev"></a></div>
 <div id="mask"><em class="loading">
  <p>loading</p>
  </em></div>
 <div id="box" path_pattern='img/###.png'></div>
 <div id="imgbox"></div>
 <div class="box-control box-control-right"><a title="逆时针转动" href="javascript:void(0)" class="next" id="next"></a></div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>
</body>
</html>

以上就是為大家分享的jQuery實現的產品自動360度旋轉展示特效程式碼,希望大家可以喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn