Javascript elliptical rotating album implementation code

Function Description:
1. automatic and manual modes are supported: automatic rotation and display in automatic mode. You can select the current image with the mouse in manual mode, or select the previous/next image through the provided interface.
2. You can manually add the rotation easing mode. The default mode is: constant speed, Fast first, slow first, and fast.
3. You can customize the width and height of the rotating track.
4. Supports IE6 7 8 9 10 firefox chrome and other browsers.

Effect preview:

Implementation principle:
Based on the motion of images on an elliptical track, the scaling size is dynamically changed to achieve a three-dimensional visual effect.
Code Analysis:
Copy codeThe Code is as follows:
Init: function (id, options ){
Var defaultOptions = {
Width: 600, // container width
Height: 200, // container height
ImgWidth: 100, // Image Width
ImgHeight: 60, // The Image Height.
MaxScale: 1.5, // maximum Scaling Factor
MinScale: 0.5, // min Scaling Factor
RotateSpeed: 10 // Running Speed
}
Options = util. extend (defaultOptions, options); // parameter settings
This. container = util. $ (id );
This. width = options. width;
This. height = options. height;
ImgWidth = this. imgWidth = options. imgWidth;
ImgHeight = this. imgHeight = options. imgHeight;
This. maxScale = options. maxScale;
This. minScale = options. minScale;
ScaleMargin = this. maxScale-this.minScale;
This. rotateSpeed = options. rotateSpeed;
This. imgs = util. $ ('img ', this. container );
This. setContainerSize (this. width, this. height );
InitImgRC (this. imgs );
}

The first is the initialization function, which contains defaultOptions as the default value. You can also input custom values, including: container width, container height, image width, Image Height, maximum scaling factor, minimum scaling factor, and rotation speed. Call the setContainerSize function after initialization.
Copy codeThe Code is as follows:
/* Set the container size */
SetContainerSize: function (width, height ){
Width = width | this. width;
Height = height | this. height;
This. container. style. position = 'relative ';
This. container. style. width = width + 'px ';
This. container. style. height = height + 'px ';
ChangeRotateWH. call (this, width, height); // change the rotation track after changing the container size
},

The setContainerSize function sets the container size. The container size determines the rotation trajectory size. For example, when we set the container height to width, the trajectory changes to a circle. After the container size is set, call the changeRotateWH function.
Copy codeThe Code is as follows:
/* Change the length of the horizontal and vertical half axes of the elliptical rotation trajectory */
Var changeRotateWH = function (width, height ){
Var halfScale = (this. maxScale-this.minScale)/2; // resize the image when rotating to the center position
Rotate = {};
Rotate. origwidth = width/2; // rotate the X axis of the Origin
Rotate. originY = height/2; // rotate the Y axis of the Origin
Rotate. halfRotateWidth = (width-this.imgWidth)/2; // rotate the horizontal axis length
Rotate. halfRotateHeight = (height-this.imgHeight)/2; // rotate the vertical half axis length
}

The changeRotateWH function is used to set the horizontal and vertical half axis lengths (halfRotateWidth and halfRotateHeight in the program) of the elliptical rotation trajectory based on the container size. The specific calculation method is as follows: track Height = (container height-Image Height)/2, track width = (container width-image width)/2), in high school mathematics, we have learned the standard equations of the elliptic: () the horizontal and vertical half axes correspond to a and B of the elliptic equations respectively. A> B because the horizontal axis is a longer elliptic.
Copy codeThe Code is as follows:
/* Set the Rotation Angle and initial position of the image */
Var initImgRC = function (imgs ){
Var len = imgs. length;
Con = (2 * Math. PI)/len;
For (var I = 0; I <len; I ++ ){
Imgs [I]. RC = I * con;
Imgs [I]. style. width = imgWidth + 'px ';
Imgs [I]. style. height = imgHeight + 'px ';
SetImgPositionAndSize (imgs [I], 0 );
}
}

After setting the basic Coordinate System of an ellipse, we can arrange the image into an elliptical shape based on the number of images, first, we can use 2 π/number of images to obtain the angle occupied by the interval between images, and then deploy the images evenly on the elliptical track. At this time, all the images form an elliptical shape, the initial distribution of the image is now available, and the next task is to move the image along this track.
Copy codeThe Code is as follows:
/* Set the constant variation of the image position and size */
Var setImgPositionAndSize = function (img, path, direction ){
Direction = direction | 'cw ';
Var dir = direction = 'cw '? -1:1;
Img. RC + = (path * dir );
ModifyImgAngle (img );
SetImgSize (img );
}

This function sets the size of the Image Based on the position of each image. In addition, we need to input a parameter: direction (value: CW (clockwise) or ACW (counterclockwise )), then, by constantly increasing the RC attribute (rotation angle) of the image, the image is automatically rotated at a constant speed, and the rotation mode of automatic rotation is OK.
Copy codeThe Code is as follows:
/* Modify the image rotation angle (between 0 and 2 Pai )*/
Var modifyImgAngle = function (img ){
(Img. RC> (2 * Math. PI) & (img. RC-= 2 * Math. PI );
(Img. RC <0) & (img. RC + = 2 * Math. PI );
}

Before rotating an image, we can make a small modification to the angle of each image. The rotation angle is limited to 0-2 π to facilitate subsequent computation.
　
Copy codeThe Code is as follows:
/* Set the image size and position */
Var setImgSize = function (img ){
Var left = rotate. origate + rotate. halfRotateWidth * Math. cos (img. RC)-imgWidth/2;
Var top = rotate. originY-rotate.halfRotateHeight * Math. sin (img. RC)-imgHeight/2;
Var scale = minScale + scaleMargin * (rotate. halfRotateHeight-rotate.halfRotateHeight * Math. sin (img. RC)/(2 * rotate. halfRotateHeight); // The scaling ratio of the image at that time
Img.style.css Text = 'position: absolute; left: '+ left + 'px ;'
+ 'Top: '+ top + 'px ;'
+ 'Width: '+ imgWidth * scale + 'px ;'
+ 'Height: '+ imgHeight * scale + 'px ;'
+ 'Z-index: '+ Math. round (scale * 100 );
}

How to rotate an image according to the elliptical trajectory by changing the rotation angle? Let's look back at the previous elliptic equation: () because we need to handle the rotation, we want to convert the processing of x and y into the processing of the rotation angle. Therefore, x, y coordinates can be expressed as: x = a * cos α, y = B * sin α. The X coordinate of the image is rotate. originX + rotate. halfRotateWidth * Math. cos (img. RC)-imgWidth/2 (rotate. originX is the X coordinate of the origin, where the center point of the container is taken), and the Y axis is the same. As mentioned before, the image scaling size is based on the position of the image. Therefore, the scaled scale value is calculated based on the length of the vertical axis occupied by y coordinates. In addition, the level link z-index is calculated based on the scale value. The size is larger than the level and displayed in front.
Copy codeThe Code is as follows:
/* Set the rotation mode (automatic/manual )*/
SetPattern: function (patternName, option ){
Option = option | {};
This. pattern = patternName;
Var rotateSpeed = option. rotateSpeed | 10;
This. path = Math. PI/1000 * rotateSpeed;
(Typeof timeId! = 'Undefined') & window. clearInterval (timeId );
If (patternName = 'auto') {// you can specify the rotation direction in auto mode: option. rotateDir rotation speed: option. rotateSpeed.
Var self = this;
Var direction = option. rotateDir | 'cw '; // clockwise: CW counterclockwise: ACW
RemoveImgsHandler (this. imgs );
TimeId = window. setInterval (function (){
For (var I = 0, len = self. imgs. length; I <len; I ++ ){
SetImgPositionAndSize (self. imgs [I], self. path, direction );
}
}, 20 );
}
Else if (patternName = 'hand') {// Manual mode, callback function: option. onSelected easing mode: option. tween
Var onSelected = option. onSelected | util. emptyFunction;
Var tween = Tween [tween] | Tween ['easeout']; // The default easing mode is easeOut.
RemoveImgsHandler (this. imgs );
(Typeof timeId! = 'Undefined') & window. clearInterval (timeId );
TimeId = undefined;
BindHandlerForImgs (this. imgs, this. path, tween, onSelected );
}
}
}

Now let's take a look at the setPattern method interface for the user to select the manual mode or automatic mode. This method selects different modes based on different input strings, and "auto" is the automatic mode, this mode also allows you to input custom parameters, including the rotation speed and orientation. When "hand" is input, it is in manual mode. Additional parameters can be the callback function after the image is manually selected, and the rotation easing mode.
Copy codeThe Code is as follows:
Var Tween = {// by default, the easing class provides three easing modes: linear easein easeout.
Linear: function (t, B, c, d, dir) {return c * t/d * dir + B ;},
EaseIn: function (t, B, c, d, dir ){
Return c * (t/= d) * t * dir + B;
},
EaseOut: function (t, B, c, d, dir ){
Return-c * (t/= d) * (t-2) * dir + B;
}
};

The above are the slow modes. The default three modes are: speed first, speed first, and speed later. You can call the addTweenFunction method to add your own easing mode.