jQuery Circlrプラグインをベースに商品画像の360度回転を実現

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

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

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

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

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

画像のプリロード処理。

写真を反転および回転できます。

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

コア ファイルを紹介します

<script src=&#39;js/jquery.js&#39;></script> 
<script src=&#39;js/circlr.js&#39;></script>

HTML を作成するには、画像を配置する DIV コンテナーを作成するだけです。 もちろん、それも可能です。ロードされた DIV を追加してエクスペリエンスを向上させます。

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

プラグインを初期化するための JS を作成します。

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

Parameters

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

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

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

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

cycle: 画像を周期的に回転するかどうか。デフォルト値は true です。

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

speed: circlr.turn(i) を介してアニメーション フレームが切り替わる速度。デフォルト値は 50 ミリ秒です。

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

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

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

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

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

Method

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): プラグインの初期化後にオブジェクトのパラメータを変更します:

垂直

逆

サイクル

速度

playSpeed

上記の内容は、この記事で紹介した jQuery Circlr プラグイン 360 度回転、気に入っていただければ幸いです。

jQuery Circlr プラグインに基づく商品画像の 360 度回転の実現に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。