仿苹果效果的JS幻灯片

最近几年这种效果很流行，以前做过类似的效果，不过用的是FLASH技术，现在用发现借助jquery的强大，用javascript同样能完成，演示地址：http://zitk.net/zp/hpic/

上代码：

代码如下：

/*jquery.hpic.js

 *autor:haiyume www.zitk.net

 *图片必须为6张

 */

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,{

eOutBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

}

});

(function($){

$.fn.hpic = function(options){

var defaults = {

width:400,     //图片正常宽度

height:250,    //图片正常高度

diff:60,       //两图片之间的像素差

radio:0.7,     //缩放比率

gt:2000,       //动画间隔时间

mt:200,        //动画执行时间

bt_left:null,  //左移按钮

bt_right:null  //右移按钮

};

var options = $.extend(defaults, options);

this.each(function(){

var hpic=$(this);

//计算CSS尺寸

var hpic_w=$(hpic).width();

var hpic_h=$(hpic).height();

var l=parseInt((hpic_w-options.width)/2);

var width=[options.width*options.radio*options.radio,options.width*options.radio,options.width,options.width*options.radio,options.width*options.radio*options.radio,options.width*options.radio*options.radio];

var height=[options.height*options.radio*options.radio,options.height*options.radio,options.height,options.height*options.radio,options.height*options.radio*options.radio,options.height*options.radio*options.radio];

var left=[l-2*options.diff,l-options.diff,l,hpic_w-(l-options.diff)-width[1],hpic_w-(l-2*options.diff)-width[0],l];

var top=[

parseInt((hpic_h-height[0])/2),

parseInt((hpic_h-height[1])/2),

parseInt((hpic_h-options.height)/2),

parseInt((hpic_h-height[1])/2),

parseInt((hpic_h-height[0])/2),

parseInt((hpic_h-height[0])/2)

];

var z=[5,10,20,10,5,0];

//CSS初始化

$(hpic).children("img").each(function(i){

$(this).css({zIndex:z[i],width:width[i],height:height[i],left:left[i],top:top[i],borderStyle:"solid",borderColor:"#FFCC00",borderWidth:"0px"});

});

//动画部分

var arr_right=function(arr){

arr.unshift(arr[arr.length-1]);

arr.pop();

return arr;

};

var arr_left=function(arr){

arr.push(arr[0]);

arr.shift();

return arr;

}

var step=0;

var move=function(d){

if($(hpic).children("img").first().is(":animated")){return;}

if(d=="left"){arr_left(z);arr_left(left);arr_left(top);arr_left(width);arr_left(height);}

else{arr_right(z);arr_right(left);arr_right(top);arr_right(width);arr_right(height);}

$(hpic).children("img").each(function(i){

var index=i;

if(index>=6){index=0;}

$(this).css({zIndex:z[index]}).animate({left:left[index],top:top[index],width:width[index],height:height[index]},{duration:options.mt,easing:"eOutBack"});

});

};

var ant=setInterval(move,options.gt);

$(hpic).hover(

function(){clearInterval(ant);},

function(){ant=setInterval(move,options.gt);return false;}

);

//各种功能

$(hpic).children("img").each(function(){

if($(this).next("a")){$(this).click(function(){open($(this).next("a").attr("href"));});}

});

$(hpic).children("img").hover(function(){$(this).css({borderWidth:"2px"});},function(){$(this).css({borderWidth:"0px"});});

if(options.bt_left){

$('#'+options.bt_left).click(function(){move("left");}).

hover(function(){clearInterval(ant);},function(){ant=setInterval(move,options.gt);return false;});

}

if(options.bt_right){$('#'+options.bt_right).click(function(){move("right");}).

hover(function(){clearInterval(ant);},function(){ant=setInterval(move,options.gt);return false;});

}

 

});//end each

};

})(jQuery);