10192020-11-12 15:06:42
收藏$(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);
});
本3D轮播插件来自网友分享,配置上未做优化。如果要调整,需要具备一定的开发能力
插件已人工检测,确认安全无毒,请放心下载。