jQuery点击相册图片拼成大图幻灯片炫酷特效

var ImgUrl=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg","img/20.jpg","img/21.jpg","img/22.jpg","img/23.jpg","img/24.jpg"];var ImgPV_T = [];var ImgPV_L = [];var arr = []; var leftP = [];var topP = [];var body_bg = new Image();body_bg.src = 'img/body_bg.jpg';$(body_bg).load(function (){ var bodyH = 0; var bodyW = 0; var DivObj = $(".container"); var UlObj = $(".content"); var LiObj = $(".content li"); var AObj = $(".content li a"); var Img = $(".content li img"); var Strong = $(".content li strong"); var Index = 0; var trues = true; var marLs = 0; var width_W = 0; var height_W = 0; var time; var marginLeft; var marginTop=0; var xyz; //获取窗口大小 function bodys(){ bodyH= parseInt($("body").css("height")); bodyW= parseInt($("body").css("width")); }; //隐藏gif function GifNone(){ bodys(); $(".load").css("display","none"); CDispersion(600); rotate(true); var r=setTimeout(style,600); }; //图片加载和归位 $(function ImgPValue(){ var Top = 0; var Left = 0; var left_P= 0; var top_P = 0; var x = 0; for(var i=0; i0.5){ LiObj.eq(i).css({ "transform":"rotate("+x+"deg)", "-o-transform":"rotate("+x+"deg)", "-moz-transform":"rotate("+x+"deg)", "-webkit-transform":"rotate("+x+"deg)" }); }else{ LiObj.eq(i).css({ "transform":"rotate("+-x+"deg)", "-o-transform":"rotate("+-x+"deg)", "-moz-transform":"rotate("+-x+"deg)", "-webkit-transform":"rotate("+-x+"deg)" }); }; }; }; //container散开 function style(){ $(".content li img").animate({"margin":"5px","width":"150px","height":"90px"},300); }; function CDispersion(s){ var width = parseInt(bodyW/100*80); var height = parseInt(bodyH/100*80); marginTop = (height-(height*0.8)-100)/2; var marginT = parseInt(height/2); width_w = width; height_w = height; var margin_1 = parseInt(width/2); var margin_2 = parseInt(width-(width/100*80+160)); var margin_3 = parseInt(margin_2/2); marLs = margin_3; var marginL = margin_1-margin_3; marginLeft = marginL; xyz=marginT; $(".content li span a,.content li span strong").fadeOut(1000); DivObj.animate({ "width":width+"px", "height":height+"px", "margin-top":-marginT+marginTop+"px", "margin-left":-marginL+"px" },s,function (){ if(trues){ UlObj.css({ "width":width+"px", "height":height+"px" }); }; }); }; //窗口大小改变事件 $(window).resize(function (){ $(".left").animate({"margin-left":"-95px"},400); $(".right").animate({"margin-right":"-95px"},400); UlObj.css("box-shadow","0px 0px 0px 0px #111111"); UlObj.stop(true); trues=false; bodys(); DivObj.stop(true); CDispersion(0); time = setTimeout(UlWH,300); }); function UlWH(){ UlObj.stop(true); DivObj.stop(true); clearTimeout(time); width_w = parseInt(DivObj.css("width")); height_w = parseInt(DivObj.css("height")); rotate(true); UlObj.animate({ "width":width_w+"px", "height":height_w+"px", "margin-top":"0px", "margin-left":"0px" },800,function (){ style(); }); }; //鼠标点击集合 $(".content li").click(function (){ UlObj.stop(true); DivObj.stop(true); clearTimeout(time); if(parseInt(UlObj.css("width"))!=800){ var marginT=(height_w-500)/2; var marginL=(width_w-800)/2; Index=$(this).index(); $(".content li img").animate({"margin":"0px","width":"160px","height":"100px"},200,function (){ UlObj.animate({ "width":"800px", "height":"500px", "margin-top":marginT+"px", "margin-left":marginL+"px" },1000); DivObj.animate({"margin-left":-marginLeft-marLs+"px","margin-top":-xyz+"px"},1000,function (){ UlObj.css({"box-shadow":"2px 2px 6px -1px #111111"}); $(".left").animate({"margin-left":"0px"},400); $(".right").animate({"margin-right":"0px"},400); }); rotate(false); }); ImgBgPos(ImgUrl[Index],1000); } else{ $(".left").animate({"margin-left":"-95px"},400); $(".right").animate({"margin-right":"-95px"},400); UlObj.css("box-shadow","0px 0px 0px 0px #111111"); UlObj.animate({ "width":width_w+"px", "height":height_w+"px", "margin-top":"0px", "margin-left":"0px" },600); rotate(true); time = setTimeout(style,600); $(".content li span a,.content li span strong").fadeOut(700); DivObj.animate({"margin-left":-marginLeft+"px","margin-top":-xyz+marginTop+"px"},600); }; }); //鼠标点击换图 var p=0; $(".left").click(function (){ if(Index==0){ Index=arr.length-1; }else{ Index--; } arr.sort(function(){ return 0.5 - Math.random() }); if(p==0){ Strong.css("left","160px"); ImgHD(); }else{ AObj.css("left","160px"); ImgHD(); }; }); $(".right").click(function (){ if(Index==AObj.length-1){ Index=0; }else{ Index++; }; arr.sort(function(){ return 0.5 - Math.random() }); if(p==0){ Strong.css("left","-160px"); ImgHD_2(); }else{ AObj.css("left","-160px"); ImgHD_2(); }; }); function ImgHD_2(){ AObj.stop(true,true); Strong.stop(true,true); var y=Math.random(); var i=0; if(p==0){ function bg_3(s){ if(y<0.5){ s=200; }; Strong.eq(arr[i]).css("background","url("+ImgUrl[Index]+") "+leftP[arr[i]]+"% "+topP[arr[i]]+"%"); AObj.eq(arr[i]).animate({"left":"160px"},s,function (){ $(this).css("left","-160px"); }); Strong.eq(arr[i]).animate({"left":"0px"},s); i++; if(i0.5){ bg_3(800); }else{ time = setTimeout(bg_3,20) }; }else{ p=1; }; }; bg_3(800); }else{ function bg_4(s){ if(y<0.5){ s=200; }; AObj.eq(arr[i]).css("background","url("+ImgUrl[Index]+") "+leftP[arr[i]]+"% "+topP[arr[i]]+"%"); Strong.eq(arr[i]).animate({"left":"160px"},s,function (){ $(this).css("left","-160px"); }); AObj.eq(arr[i]).animate({"left":"0px"},s); i++; if(i0.5){ bg_4(800); }else{ time = setTimeout(bg_4,20) }; }else{ p=0; }; }; bg_4(800); }; }; function ImgHD(){ AObj.stop(true,true); Strong.stop(true,true); var y=Math.random(); var i=0; if(p==0){ function bg_1(s){ if(y<0.5){ s=200; }; Strong.eq(arr[i]).css("background","url("+ImgUrl[Index]+") "+leftP[arr[i]]+"% "+topP[arr[i]]+"%"); AObj.eq(arr[i]).animate({"left":"-160px"},s,function (){ $(this).css("left","160px"); }); Strong.eq(arr[i]).animate({"left":"0px"},s); i++; if(i0.5){ bg_1(800); }else{ time = setTimeout(bg_1,20) }; }else{ p=1; }; }; bg_1(800); }else{ function bg_2(s){ if(y<0.5){ s=200; }; AObj.eq(arr[i]).css("background","url("+ImgUrl[Index]+") "+leftP[arr[i]]+"% "+topP[arr[i]]+"%"); Strong.eq(arr[i]).animate({"left":"-160px"},s,function (){ $(this).css("left","160px"); }); AObj.eq(arr[i]).animate({"left":"0px"},s); i++; if(i0.5){ bg_2(800); }else{ time = setTimeout(bg_2,20) }; }else{ p=0; }; }; bg_2(800); }; };});

在线演示        积分下载        6毛下载        砍两刀下载