Putaran 360 darjah imej produk berdasarkan jQuery Circlr plug-in_jquery

Circlr ialah pemalam jQuery yang boleh memutar dan memaparkan imej produk 360 darjah. Circlr menggunakan gambar produk yang diambil secara tetap pada sudut tertentu untuk mencipta kesan memutarkan bingkai gambar demi bingkai menggunakan seret tetikus, roda tetikus dan sentuhan mudah alih. Berbanding dengan Rollerblade sebelumnya, animasinya lebih lancar dan lebih mudah dikawal. Pemalam ini sangat sesuai untuk paparan produk.

Ciri-cirinya ialah:

Menyokong putaran mendatar atau menegak.

Sokong acara sentuhan mudah alih.

Sokong acara tatal.

Pemprosesan pramuat imej.

Anda boleh memutar gambar secara terbalik dan gelung.

contoh tutorial jQ yang hebat: imej produk jQuery 360 ​​darjah putaran Circlr

Memperkenalkan fail teras

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

Untuk mencipta HTML, anda hanya perlu mencipta bekas DIV untuk meletakkan imej Sudah tentu, anda juga boleh menambah DIV yang dimuatkan untuk meningkatkan pengalaman.

<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>

Tulis JS dan mulakan pemalam

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

Parameter

tetikus: Sama ada hendak memutar imej melalui tetikus, nilai lalai adalah benar.

Tatal: Sama ada hendak memutar imej melalui tatal, nilai lalai adalah palsu.

menegak: Sama ada hendak memutar imej apabila menggerakkan tetikus ke arah menegak, nilai lalai adalah palsu.

terbalik: Sama ada hendak menterbalikkan arah, nilai lalai adalah palsu.

kitaran: Sama ada hendak mengitar imej, nilai lalai adalah benar.

mula: Mulakan bingkai animasi, nilai lalai ialah 0.

kelajuan: Kelajuan bingkai animasi ditukar melalui circlr.turn(i) Nilai lalai ialah 50 milisaat.

automain: Sama ada hendak melakukan putaran 360 darjah dan main balik imej secara automatik Nilai lalai adalah palsu.

playSpeed: Kelajuan main balik jujukan animasi, nilai lalai ialah 100 milisaat.

pemuat: ID elemen DOM yang dipramuat.

sedia: fungsi panggil balik selepas imej dimuatkan.

perubahan: Fungsi panggil balik selepas bingkai animasi disesuaikan (mengambil bingkai semasa dan jumlah bilangan bingkai sebagai parameter).

Kaedah

crl.el: Mengembalikan nod elemen DOM objek.

crl.length: Mengembalikan jumlah bilangan bingkai animasi objek.

crl.turn(i): Animasi berputar ke bingkai ke-i.

crl.go(i): Animasi melompat ke bingkai ke-i.

crl.play(): Mula memainkan urutan animasi.

crl.stop(): Hentikan main balik animasi.

crl.hide(): Sembunyikan nod elemen DOM objek.

crl.show(): Paparkan nod elemen DOM objek.

crl.set(options): Tukar parameter objek selepas pemalam dimulakan:

menegak

terbalik

kitaran

kelajuan

playSpeed

Kandungan di atas diperkenalkan dalam artikel ini untuk melaksanakan putaran 360 darjah imej produk berdasarkan pemalam jQuery Circlr saya harap anda menyukainya.