スライドショーにフェイドイン＋フェイドアウト | WordPressのカスタマイズ

var fadei=100;
	/*↑fadeoutする時の度合い、slideimg関数で参照するのでグローバル変数*/

function fadeout(target,num){
	var opanum;
	var doc=document;
	var valinterv=parseInt(num);
	var fadeId=setInterval(function(){
		if(fadei>=0){
			if(doc.getElementById(target).style.filters){/*IE9*/
				doc.getElementById(target).style.filter="alpha(opacity="+fadei+")";
			}else{/*Firefox,Chrome,Opera,Safari*/
				opanum=fadei/100;
				doc.getElementById(target).style.opacity=opanum;
			}
			fadei-=10;
		}else{
			fadei=100;
			clearInterval(fadeId);
		}
	},valinterv);
}

function fadein(target,num){
	var opanum;
	var fadej=0;
	var doc=document;
	var valinterv=parseInt(num);
	var fadeId=setInterval(function(){
		if(fadej<=100){
			if(doc.getElementById(target).style.filters){
				doc.getElementById(target).style.filter="alpha(opacity="+fadej+")";
			}else{
				opanum=fadej/100;
				doc.getElementById(target).style.opacity=opanum;
			}
			fadej+=10;
		}else{
			fadej=0;
			clearInterval(fadeId);
		}
	},valinterv);
}

function slideimg(intervalnum){
	var doc=document;
	var imgsrc;
	var timenum=intervalnum;

	fadeout("upimage","70");
	imgsrc=img01.src;
	var waitId=setInterval(function(){
				if(fadei===100){
					clearInterval(waitId);
					/*先読みさせていた画像を表示*/
					doc.getElementById("upimage").src =imgsrc;
					fadein('upimage','70');
				}
			},100);

    sumnum+=1;
	
	/*切り替えの秒数と画像の情報の表示の更新*/
	doc.getElementById("slctdown").innerHTML="last "+timenum+" seconds";
	doc.getElementById("slidecount").innerHTML=sumnum+" : "+tarnum+" : "+imgsrc.substring(imgsrc.indexOf("20",20))+" : int."+timenum+" sec";
    var ctdownnum=timenum;
	var callnum=timenum*1000;
	
    /*次の画像のための番号をつくります*/
	var knum=0;
    var tarflg;
    var knum=0;
    var tarflg;
    while(knum<3){
        tarflg=0;
        var nowday=new Date();
        var nowsecond=nowday.getSeconds();
		/*乱数をよりユニークな数にするために秒数をかけてみました*/
        var rand = Math.floor((Math.random()*100000000))*nowsecond;
        tarnum=rand % imagesStr.length;
		/*一度表示した画像番号にならないように配列tarlistのフラグで検証し、3回まで作り直します*/
        if(tarlist[tarnum]==-1){
            tarflg=1;
        }
        if(tarflg==0){break;}
        knum+=1;
    }
    var lastflg=0;
	/*３回作っても既出でない番号を作れなかったときはtarlistの中から未使用の番号を最後から順に探し出して使用します。*/
    if(tarflg==1){
        lastflg=1;
        for(var i=tarlist.length-1;i>=0;i--){
            if(tarlist[i]!=-1){
                tarnum=i;
                lastflg=2;
                break;
            }
        }
    }
	/*それでも無い場合は全ての画像を表示したということなのでtarlistの値を全て１に初期化します*/
    if(lastflg==1){
        for(var i=0;i<tarlist.length;i++){
            tarlist[i]=1;
        }
    }
    tarlist.splice(tarnum,1,-1);
      
    
	/*次の画像を先読みさせます*/
	var tmpimg;
    tmpimg=imagesStr[tarnum];
    img01.src=tmpimg;
	
	/*戻る表示の時のために表示した画像の番号を配列に格納していきます*/
    pastimg.unshift(tarnum);
	/*画像の履歴が50以上になったら配列の末から一つづつ削除します*/
    if(pastimg.length>50){
        var kuzu=pastimg.pop();
    }
    setTimeout("sldcountdown('"+ctdownnum+"')",1000);
    timeId=setTimeout("slideimg('"+timenum+"')",callnum);
}

fadeout("upimage","70");
imgsrc=img01.src;
document.getElementById("upimage").src =imgsrc;
fadein('upimage','70');