スライドショーにフェードイン・アウト効果

javascriptのスライドショーにフェードイン・アウト効果をつける方法をご教授いただきたいのですが、どなたかよろしくお願いいたします。

No.1 ベストアンサー 回答者： hrm_mmm 回答日時： 2004/11/15 01:10

ie限定ならfilter効果で、できそうかも。

または、レイヤークリップで、表示領域を拡大縮小すれば、
フェードイン、フェードアウトしているように見せかけることは出来るでしょう。
で、レイヤーを２枚使って、入れ替えていけば、紙芝居のような感じに作れそうです。

とりあえず、かいつまんで以下のような感じに
<script type="text/javascript">
var ImageMax = 5;
var ImageNum = 0;
var sjpg = new Array(ImageMax); //画像を入れて置く　省略
var zMax = 100;
function autoslideshow(){
ImageNum ++ ;
if(ImageNum>= ImageMax){
ImageNum = 0;
return;
}else {
cnum = (ImageNum-1) % 2; // div tag id_num
ImgNum = (ImageNum<ImageMax-1)? ImageNum+1 : ImageNum;
cliper(cnum,ImgNum,5,5); //present clip and next img(present+2)
timer = setTimeout("autoslideshow()",10000);
}
}

// slide div tag size and position
var s_width = 490;
var s_height= 370;
var s_top = 100;
var s_left =30;
// cnum:clip対象div_id_num,
// ImgNum:そのdiv（レイヤー）に入れる次のimg_Num（現在＋２）,
// frm:分割数, frc:分割減数カウント
function cliper(cnum,ImgNum,frm,frc){
frc --;
if(frc>0){
clip_id = "s" + cnum;
clip_size= frc *( s_width / frm );
clip_left= s_width - clip_size;
o_left = s_left - clip_left; // 左へずらす
if(document.getElementById){
obj = document.getElementById(clip_id).style;
obj.clip = "rect(0,"+s_width+","+s_height+","+clip_left+")";
obj.left = o_left ;
}else{
return; // とろあえず、ie5.5、nescape7のみ対応
}
c_timer = setTimeout("cliper("+cnum+","+ImgNum+","+frm+","+frc+")",5000/frm);

}else{
clip_clr(cnum,zMax-ImgNum,ImgNum); // 裏に回して、画像入れ替え、表示サイズを戻す。
}
}
function clip_clr(cnum,zi,ImgNum){
clip_id = "s" + cnum;
if(document.getElementById){
obj = document.getElementById(clip_id).style;
obj.clip = "rect(0,"+s_width+","+s_height+",0)";
obj.zIndex = zi
obj.left = s_left;
img_name = "slideimg"+ cnum;
document.images[img_name].src = sjpg[ImgNum].src ;
}
}
</script>
<form><input type="button" onClick="autoslideshow()"></form>
<div id="s0" style="略"><img src="0.gif" name="slideimg0"></div>
<div id="s1" style="略"><img src="1.gif" name="slideimg1"></div>
２個のdivタグレイヤーをstylesheet指定で同じ位置に置く,position:absoluteを必ず指定のこと。

layers[].clipを使えばnn4.xにも対応可能ですけど、ちょっとスクリプトサイズが大きくなります。

この回答へのお礼

hrm_mmさま

遅くなってすみません。
参考にさせていただきます。
ありがとうございました。

お礼日時：2004/11/27 23:43