jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転

Circlr は、商品画像を 360 度回転して表示できる jQuery プラグインです。 Circlr は、特定の角度で定期的に撮影された製品写真を使用して、マウス ドラッグ、マウス ホイール、モバイル タッチを使用して写真をフレームごとに回転させる効果を作成します。以前の Rollerblade に比べて、アニメーションがよりスムーズになり、制御が容易になり、商品の表示に非常に適したプラグインです。

その機能は次のとおりです:

水平または垂直回転をサポートします。

モバイルタッチイベントをサポートします。

スクロールイベントをサポートします。

画像のプリロード処理。

写真を逆回転したり、ループしたりすることができます。

jQ のクールなサンプル チュートリアル: jQuery 製品画像 360 度回転 Circlr

コアファイルの紹介

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>

HTML を作成するには、画像を配置するための DIV コンテナを作成するだけで済みます。もちろん、エクスペリエンスを向上させるためにロードされた DIV を追加することもできます。

<div id="circlr">
 <img  src="/static/imghwm/default1.png"  data-src="picture/00.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/01.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/02.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/03.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/04.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/05.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/06.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/07.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/08.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/09.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/10.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/11.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/12.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/13.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/14.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/15.jpg"  class="lazy"  data- alt="jQuery Circlr plug-in_jquery に基づく商品画像の 360 度回転" >
 <div id="loader"></div>
</div>

JS を記述してプラグインを初期化します

var crl = circlr(element, options); //调用方法
//element：放置图片的容器元素的ID。
//options：参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

パラメータ

mouse: マウスを使用して画像を回転するかどうか。デフォルト値は true です。

スクロール: スクロールによって画像を回転するかどうか。デフォルト値は false です。

vertical: マウスを垂直方向に移動したときに画像を回転するかどうか、デフォルト値は false です。

reverse: 方向を反転するかどうか。デフォルト値は false です。

cycle: 画像を循環させるかどうか。デフォルト値は true です。

start: アニメーション フレームを開始します。デフォルト値は 0 です。

speed: circlr.turn(i) によるアニメーション フレームの切り替え速度。デフォルト値は 50 ミリ秒です。

autoplay: 画像の 360 度回転と再生を自動的に実行するかどうか。デフォルト値は false です。

playSpeed: アニメーション シーケンスの再生速度。デフォルト値は 100 ミリ秒です。

loader: プリロードされた DOM 要素の ID。

ready: 画像がロードされた後のコールバック関数。

変更: アニメーション フレームが適応された後のコールバック関数 (現在のフレームとフレームの合計数をパラメーターとして受け取ります)。

メソッド

crl.el: オブジェクトの DOM 要素ノードを返します。

crl.length: オブジェクトのアニメーション フレームの総数を返します。

crl.turn(i): アニメーションは i 番目のフレームまで回転します。

crl.go(i): アニメーションは i 番目のフレームにジャンプします。

crl.play(): アニメーション シーケンスの再生を開始します。

crl.stop(): アニメーションの再生を停止します。

crl.hide(): オブジェクトの DOM 要素ノードを非表示にします。

crl.show(): オブジェクトの DOM 要素ノードを表示します。

crl.set(options): プラグインの初期化後にオブジェクトのパラメータを変更します:

縦

逆

サイクル

速度

プレイスピード

この記事では、jQuery Circlr プラグインをベースに商品画像の 360 度回転を実装するための内容を紹介しています。