Based on jquery circlr Plug-ins to achieve 360-degree product picture rotation _jquery

CIRCLR is a product image can be 360 degrees full rotation display of jquery plug-ins. CIRCLR by a certain angle of the product picture, produced can be used to drag the mouse, mouse wheel and move touch to do the picture frame rotation effect. The animation is much smoother and easier to control than the previous rollerblade, and the plugin is ideal for display of goods.

It is characterized by:

Supports rotation in either horizontal or vertical direction.

Supports mobile touch events.

Scrolling events are supported.

Picture preload processing.

You can rotate the picture in reverse and loop.

JQ Cool Example Tutorial: jquery product picture 360 degrees Rotary CIRCLR

Introducing Core Files

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

Create HTML, just create a div container to place the picture, and of course add a loaded div to enhance the experience.

<div id= "CIRCLR" >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div id= "loader" ></div>
</div>

Write JS, initialize plugin

var CRL = CIRCLR (element, options); Call Method
//element: The ID of the container element where the picture is placed.
//options: Parameter object. 
//Instance
 var CRL = circlr (' circlr ', {
  scroll:true,
  loader: ' loader '
 });

Parameters

Mouse: The default value is True if the picture is rotated through the mouse.

Scroll: The default value is False if the picture is rotated through scroll.

Vertical: Rotate the picture when you move the mouse vertically, and the default value is False.

Reverse: Reverses the direction, and the default value is False.

Cycle: Rotate the picture, and the default value is true.

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

Speed: The speed at which animation frames are switched through Circlr.turn (i), with a default value of 50 milliseconds.

AutoPlay: Whether the picture is automatically rotated 360 degrees, the default value is False.

Playspeed: The speed at which the animation sequence is played, with a default value of 100 milliseconds.

Loader: Pre-loading the ID of the DOM element.

Ready: The callback function after the picture load completes.

Change: The callback function (in the current frame and the total number of frames) after the animation frame is adapted.

Method

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

Crl.length: Returns the total number of animation frames for an object.

Crl.turn (i): The animation rotates to frame I.

Crl.go (i): Animation jump to frame I.

Crl.play (): Starts the animation sequence's playback.

Crl.stop (): Stop the animation playback.

Crl.hide (): Hides the DOM element node of an object.

Crl.show (): Displays the DOM element node of the object.

Crl.set (Options): Changes the parameters of an object after the plug-in is initialized:

Vertical

Reverse

Cycle

Speed

Playspeed

The above content is this article introduces to everybody based on the jquery CIRCLR plug-in product picture 360 degrees rotate, hoped everybody likes.