ポイントは何ですか？ そのため、画像は部分（正方形、ストライプなど）で開き、表示されるだけでなく、すべてに効果が詰め込まれます。
それでは、始めましょう。
最初に小さな設定を行います
change_img={
x:7,
y:10,
sort:4,
delay:{
st:5000,
animate:1000,
cadr:50
},
div_id: 'slider_photo'
}
* This source code was highlighted with Source Code Highlighter .
change_img={
x:7,
y:10,
sort:4,
delay:{
st:5000,
animate:1000,
cadr:50
},
div_id: 'slider_photo'
}
* This source code was highlighted with Source Code Highlighter .
ここでは、すべてがシンプルで明確だと思います。 行/列の数、並べ替えの種類（詳細は後述）、変更時の遅延、写真付きdivのid。
一番下の行は、画像を含むdivに、背景が配置された小さなdivasがいっぱいであり、必要に応じて既に回転していることです。
最初に、正方形の幅と高さを計算します
r=$( '#' +change_img.div_id+ ' img' );
change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
* This source code was highlighted with Source Code Highlighter .
r=$( '#' +change_img.div_id+ ' img' );
change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
* This source code was highlighted with Source Code Highlighter .
これらの非常に正方形でdivを埋めます
function create_div_img(){
x=0;
for (i=0;i<change_img.x;i++)
for (k=0;k<change_img.y;k++){
d= document .createElement( 'DIV' );
$(d).css({
position: 'absolute' ,
top:change_img_x*i+ 'px' ,
left:change_img_y*k+ 'px' ,
opacity:0,
'z-index' :10,
background: 'url("' +src_i[x]+ '")' ,
'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px'
});
d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ;
document .getElementById( 'img_change_' +x).appendChild(d);
}
}
* This source code was highlighted with Source Code Highlighter .
function create_div_img(){
x=0;
for (i=0;i<change_img.x;i++)
for (k=0;k<change_img.y;k++){
d= document .createElement( 'DIV' );
$(d).css({
position: 'absolute' ,
top:change_img_x*i+ 'px' ,
left:change_img_y*k+ 'px' ,
opacity:0,
'z-index' :10,
background: 'url("' +src_i[x]+ '")' ,
'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px'
});
d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ;
document .getElementById( 'img_change_' +x).appendChild(d);
}
}
* This source code was highlighted with Source Code Highlighter .
まあ、すべてが簡単です-絶対配置で正方形を作成するための2サイクル
そして今、これらの部分のスムーズな拡張を作成する関数自体
function div_animate(){
s=0;
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
setTimeout(ferter,change_img.delay.cadr);
}
}
* This source code was highlighted with Source Code Highlighter .
function div_animate(){
s=0;
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
setTimeout(ferter,change_img.delay.cadr);
}
}
* This source code was highlighted with Source Code Highlighter .
ここでも、すべてが明確です-タイミングによって、新しい広場のアニメーションを呼び出します。 ブラウザを最小化して展開すると（any）、クラッシュし、正方形がほぼ同時に表示されるため、setIntervalを拒否しました。
さて、コードを注意深く見ると、arr_chagr配列が表示されています。この配列は（まだ）どこでも宣言されておらず、何もしません。
この配列は、正方形の外観のシーケンスを担当します。 まず、設定で、ソートタイプ（0〜5）を設定します。
次に、この機能を検討してください。
function get_array_change(x){
reff= new Array();
for (i=0;i<x;i++)reff[i]=i;
switch (change_img.sort){
default :
case 0: return reff; break ;
case 1: return reff.reverse(); break ;
case 2: return array_x(); break ;
case 3: return array_x().reverse(); break ;
case 4: return array_casc(); break ;
case 5: return array_casc().reverse(); break ;
}
function array_x(){
arr= new Array();es=0;
for (i=0;i<change_img.y;i++)
for (k=0;k<change_img.x;k++){
arr[es++]=reff[i+k*change_img.y];
}
return arr;
}
function array_casc(){
arr= new Array();sr=change_img.y-change_img.x;
es=0;rem_x=-1;fer_y=0;rif=-1;
for (i=0;i<change_img.x;i++){
rif++;gren=0;
rem_x+=rif+1;fer_y=rif;
keyt=rem_x;miss=0;
for (k=0;k<change_img.y;k++){
if (k)keyt+=fer_y;
if (fer_y<change_img.x&&!gren)fer_y++;
else {miss++} if (miss>=sr&&k){fer_y--;gren=1;}
arr[keyt]=reff[es++];
}
}
return arr;
}
}
* This source code was highlighted with Source Code Highlighter .
function get_array_change(x){
reff= new Array();
for (i=0;i<x;i++)reff[i]=i;
switch (change_img.sort){
default :
case 0: return reff; break ;
case 1: return reff.reverse(); break ;
case 2: return array_x(); break ;
case 3: return array_x().reverse(); break ;
case 4: return array_casc(); break ;
case 5: return array_casc().reverse(); break ;
}
function array_x(){
arr= new Array();es=0;
for (i=0;i<change_img.y;i++)
for (k=0;k<change_img.x;k++){
arr[es++]=reff[i+k*change_img.y];
}
return arr;
}
function array_casc(){
arr= new Array();sr=change_img.y-change_img.x;
es=0;rem_x=-1;fer_y=0;rif=-1;
for (i=0;i<change_img.x;i++){
rif++;gren=0;
rem_x+=rif+1;fer_y=rif;
keyt=rem_x;miss=0;
for (k=0;k<change_img.y;k++){
if (k)keyt+=fer_y;
if (fer_y<change_img.x&&!gren)fer_y++;
else {miss++} if (miss>=sr&&k){fer_y--;gren=1;}
arr[keyt]=reff[es++];
}
}
return arr;
}
}
* This source code was highlighted with Source Code Highlighter .
配列内のx個の要素を取得します（arr_chagr = get_array_change（change_img.x * change_img.y）;）
さて、最初の2つのケースはすべて明確です-シンプルで拡張された配列。
次に2つのケースがあります-同じことですが、垂直に並べ替えるだけです（array_x（）関数）。
そして最後のものはカスケードです。 言葉で説明するのは非常に難しいと思います-このソートは、列数>行数の場合にのみ機能すると言います。 （change_img.y> change_img.x）。
カスケードに関する他の何か-問題はまた、最初は十分に速く画像が開くことでしたが、中間になると徐々に遅くなります。 原則として、最初の対角線を表示するには、1-2の正方形が必要です。最大の正方形の数は、中央の対角線になります-7は、1つの対角線の7倍、2の3.5倍などd。
標準関数div_animate（）を置き換える必要がありました
function div_animate(){
s=0;
if (change_img.sort==4||change_img.sort==5){
change_img.delay.cadr=regular;
del_rem=change_img.x*change_img.y/2;
}
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
if (change_img.sort==4||change_img.sort==5){
if (s<del_rem)setTimeout(ferter,change_img.delay.cadr-=change_img.delay.cadr/25);
else setTimeout(ferter,change_img.delay.cadr+=change_img.delay.cadr/25);
}
else setTimeout(ferter,change_img.delay.cadr);
}
}
* This source code was highlighted with Source Code Highlighter .
一番下の行は-スクリプトが正方形の半分を通過するまで、それらを開く間隔は標準間隔/ 25（change_img.delay.cadr / 25）だけ増加し、その後同じミリ秒数だけ増加します。 その結果、画像表示の開始と中間の速度の違いはほとんど目立ちません
まあ、それだけです。
このすべてのhtmlコード
/>"slider_photo">
"/template/img/1.jpg" />
"slider_photo">
/>
*このソースコードは、 ソースコードハイライターで強調表示されました。
写真の美しい変更は、どのサイトにも簡単に統合でき、カスタマイズも簡単です。
IEでも動作します。
残念ながら、小さなニーズのために独自のサイトがないため、例を挙げることはできません。
すべてのコードは、 ここで表示およびダウンロードできます 。
updデモはここで見ることができます
upd2コードを変更しました。 現在、ほぼ純粋なjsの関数によって実装されています（jqueryはアニメーションにのみ使用されます）ありがとう、 Seldon