jQuery/JS 360度旋转轮播插件下载

8552020-11-12 15:06:42

jQuery/JS 360度旋转轮播插件配置方式：

$(document).ready(function(){
   var deg=0;
   /* Storing all the images into a variable */

   var images   = $('#stage img').removeClass('default').addClass('animationReady');
   var dim       = { width:images.width(),height:images.height()};

   var cnt = images.length;

   /* Finding the centers of the animation container: */
   var centerX = $('#stage').width()/2;
   var centerY = $('#stage').height()/2 - dim.height/2;

   function rotate(step,total){
       // This function loops through all the phone images, and rotates them
       // with "step" degrees (10 in this implementation) until total has reached 0

       /* Increment the degrees: */
       deg+=step;

       var eSin,eCos,newWidth,newHeight,q;

       /* Loop through all the images: */
       for(var i=0;i<cnt;i++){

           /* Calculate the sine and cosine for the i-th image */

           q = ((360/cnt)*i+deg)*Math.PI/180;
           eSin       = Math.sin(q);
           eCos       = Math.cos(q);

           /*
           /   With the sine value, we can calculate the vertical movement, and the cosine
           /   will give us the horizontal movement.
           */

           q = (0.6+eSin*0.4);
           newWidth   = q*dim.width;
           newHeight   = q*dim.height;

           /*
           /   We are using the calculated sine value (which is in the range of -1 to 1)
           /   to calculate the opacity and z-index. The front image has a sine value
           /   of 1, while the backmost one has a sine value of -1.
           */

           images.eq(i).css({
               top           : centerY+15*eSin,
               left       : centerX+200*eCos,
               opacity       : 0.8+eSin*0.2,
               marginLeft   : -newWidth/2,
               zIndex       : Math.round(80+eSin*20)
           }).width(newWidth).height(newHeight);
       }

       total-=Math.abs(step);
       if(total<=0) return false;

       // Setting the function to be run again in 40 seconds (equals to 25 frames per second):
       setTimeout(function(){rotate(step,total)},40);

   }

   // Running the animation once at load time (and moving the iPhone into view):
   rotate(10,360/cnt);

   $('#phoneCarousel .previous').click(function(){
       // 360/cnt lets us distribute the phones evenly in a circle
       rotate(-10,360/cnt);
   });

   $('#phoneCarousel .next').click(function(){
       rotate(10,360/cnt);
   });
   $('#phoneCarousel .previous,#phoneCarousel .next').hover(function(){
       clearInterval(timer);
       },function(){
       timer=setInterval(function(){rotate(10,360/cnt);},4000);
       });
   var timer=null;

       timer=setInterval(function(){rotate(10,360/cnt);},4000);
});