circlr is a jquery plugin that can display 360-degree rotation of product images. This article will share a 360-degree rotation of product images based on the jquery circlr plugin. Let ’s take a look together.

circlr is a jquery plugin that can rotate 360-degree display of product images. circlr uses product images taken at a certain angle,Create the effect that you can use mouse drag, mouse wheel and mobile touch to rotate the picture frame by frame.The animation is much smoother than the previous rollerblade,And easier to control,This plugin is very suitable for the display of goods.

Its characteristics are:

Support horizontal or vertical rotation.

Support for mobile touch events.

Support for scroll events.

Image preload processing.

You can rotate the picture in reverse and cycle.

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 for placing pictures. Of course, you can also add a loaded div to improve the experience.

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

Write js, initialize plugin

var crl=circlr (element, options);//call method//element:The id of the container element where the image is placed.//options:parameter object.//Instance var crl=circlr ("circlr", {  scroll:true,  loader:"loader" });


mouse:whether to rotate the picture with the mouse,The default is true.

scroll:whether to rotate the image through scroll,The default value is false.

vertical:whether to rotate the picture 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 rotate the picture in a loop,The default is true.

start:start animation frame,The default value is 0.

speed:the speed at which animation frames are switched by circlr.turn (i),The default is 50 milliseconds.

autoplay:whether to automatically perform 360-degree rotating playback of pictures,The default value is false.

playspeed:the play speed of the animation sequence,The default value is 100 milliseconds.

loader:the id of the pre-loaded dom element.

ready:callback function after the image is loaded.

change:callback function after animation frame adaptation (takes the current frame and the total number of frames as parameters)


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 is rotated to the i-th frame.

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

crl.play ():Start the playback of 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:






The above is the 360-degree rotation of the product image based on the jquery circlr plugin introduced by everyone in this article. I hope everyone likes it.

  • Previous C ++ operator overloading rules
  • Next Generate two-dimensional codes such as business cards and links based on JavaScript