360-degree rotation of product images based on jQuery Circlr plug-in_jquery

Circlr is a jQuery plug-in that can rotate and display product images 360 degrees. Circlr uses product pictures taken regularly at certain angles to create the effect of rotating the pictures frame by frame using mouse drag, mouse wheel and mobile touch. Compared with the previous Rollerblade, the animation is much smoother and easier to control. This plug-in is very suitable for product display.

Its features are:

Supports horizontal or vertical rotation.

Support mobile touch events.

Support scroll events.

Image preloading processing.

You can rotate pictures in reverse and loop.

jQ cool example tutorial: jQuery product image 360 ​​degree rotation Circlr

Introducing core files

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

To create HTML, you only need to create a DIV container to place images. Of course, you can also add a loaded DIV to improve the experience.

<div id="circlr">
 <img  src="/static/imghwm/default1.png"  data-src="picture/00.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/01.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/02.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/03.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/04.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/05.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/06.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/07.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/08.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/09.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/10.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/11.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/12.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/13.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/14.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <img  src="/static/imghwm/default1.png"  data-src="picture/15.jpg"  class="lazy"  data- alt="360-degree rotation of product images based on jQuery Circlr plug-in_jquery" >
 <div id="loader"></div>
</div>

Write JS and initialize the plug-in

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

Parameters

mouse: Whether to rotate the image through the mouse, the default value is true.

Scroll: Whether to rotate the image through scroll, the default value is false.

vertical: Whether to rotate the image when moving the mouse in the vertical direction, the default value is false.

reverse: Whether to reverse the direction, the default value is false.

cycle: Whether to cycle the image, the default value is true.

start: Start animation frame, the default value is 0.

speed: The speed at which animation frames are switched through circlr.turn(i). The default value is 50 milliseconds.

autoplay: Whether to automatically perform 360-degree rotation and playback of images. The default value is false.

playSpeed: The playback speed of the animation sequence, the default value is 100 milliseconds.

loader: ID of preloaded DOM element.

ready: callback function after the image is loaded.

change: The callback function after the animation frame is adapted (taking the current frame and the total number of frames as parameters).

Method

crl.el: Returns the DOM element node of the object.

crl.length: Returns the total number of animation frames of the object.

crl.turn(i): The animation rotates to the i-th frame.

crl.go(i): The animation jumps to the i-th frame.

crl.play(): Start playing the animation sequence.

crl.stop(): Stop animation playback.

crl.hide(): Hide the DOM element node of the object.

crl.show(): Display the DOM element node of the object.

crl.set(options): Change the parameters of the object after the plugin is initialized:

vertical

reverse

cycle

speed

playSpeed

The above content is introduced in this article to implement 360-degree rotation of product images based on the jQuery Circlr plug-in. I hope you like it.