締切済み

このタグ教えて下さい

2010/02/17 14:23

このタグを使うと画像がスライドするように3秒ごとに画像が変わって行くらしいのですが、私も使ってみたいです。ですが何処に自分の作った画像を入れたらよいのか解りません？画像サイズは、横485　縦162　枚数は4枚入れてみたいです。どうぞ宜しくお願いします。 <style type="text/css"> #photo1{ position:absolute; top:16px; left:-256px; z-index:1; } #photo2{ position:absolute; top:16px; left:16px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", ], swapImage : function(){ this.count++; if (this.count >= 3) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*16-256)+"px"; if(this.count2 > 16){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="256" height="64"> <img src="a.gif" id="photo2" width="256" height="64"> </p>

jhjh3793
お礼率70% (7/10)

その他([技術者向] コンピューター)
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

みんなの回答

yuki4499
ベストアンサー率62% (10/16)

2010/02/17 17:01 回答No.1

<html> <head></head> <style type="text/css"> #photo1{ position:absolute; top:22px; left:-485px; z-index:1; } #photo2{ position:absolute; top:22px; left:22px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", "d.gif", ], swapImage : function(){ this.count++; if (this.count >= 4) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*22-485)+"px"; if(this.count2 > 22){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="484" height="162"> <img src="a.gif" id="photo2" width="484" height="162"> </p> <body> <p id = "photo1"></p> <p id = "photo2"></p> </body> </html> 簡単に修正してみました。画像サイズの横が484なので気がつかない程度だと思うけれど違和感あるかも？後は画像ファイル名を↓のものと合わせるか "a.gif", "b.gif", "c.gif", "d.gif", 逆に画像ファイル名にすれば動くんじゃないかと片手間でやったからなんかミスがありそう