画像の自動切り替えとランダム表示
-
0 名前： 匿名さん ： 2006/03/30 19:41
- 下のように「画像を自動的に一定時間で自動切り替えする」ことと、
http://www.sky.sannet.ne.jp/masapine/java_gazou2.html
「読み込むたびに画像をランダムに変更する」という
http://www.sky.sannet.ne.jp/masapine/java_gazou4.html
javascriptは同時活用できないものなのでしょうか〜。
要は「ページを開くたびに画像がランダムに変わり、その画像が
自動的に一定時間で切り替わる」という表示をさせたいのですが…
お互いのJavascript内の記述をコピー＆ペーストして組み合わせれば
うまくいくかとも思ったのですが、そもそも画像が表示されなくなっ
てしまったりでうまくいきません。
どなたかご存じの方、もしくはあきらめた方がいいよと諭してくださる
方のご回答をお待ちしています。
-
1 名前： m035 ： 2006/03/30 19:41 ［URL］
- ただ、コピペではつじつまが合いませんから、
少し修正する必要があります。
どのようにimgタグを参照しているのか、
urlを入れている配列の使われているのか･･･
考えれば難しくはないはずです。
もう少し勉強されたほうがよろしいかと。
また、JavaScriptが無効の場合を考え、
noscriptタグを使って同等の内容を表示するように心がけるのがいいでしょう。
最後に、centerタグよりはcssでセンタリングしたほうがいいでしょうね。
これは調べればできることなのでスルーしますが。
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
<!--
var simg=new Array(5);
simg[0]="images/icons1.gif";
simg[1]="images/icons2.gif";
simg[2]="images/icons3.gif";
simg[3]="images/icons5.gif";
simg[4]="images/icons8.gif";
var n=Math.floor(simg.length*Math.random());
function Gazou2(){
document.images["rimg"].src=simg[n%simg.length];
n++;
setTimeout("Gazou2()",3000);
}
document.write("<center><img src='"+simg[n]+"' name='rimg' alt='random_img'></center>");
setTimeout("Gazou2()",3000);
//-->
</script>
<noscript>
<center><img src='images/icons1.gif' alt='random_img'></center>
</noscript>
</body>
</html>
-
2 名前： Pid ： 2006/03/30 19:41
- >>0
大変失礼ながら，そのサイトのサンプルはオススメしません。
>>1
外部スクリプトでなく HTML に直接埋め込む場合，'</' を続けて書かないようご注意を。
> document.write("...</center>");
↓
document.write("...<\/center>");
alt 属性はアイコンっぽい記号（alt="*"）にした方が「アイコン」という意味を伝えやすいと思います（あるいは，いっそ空（alt=""）にした方がうるさくないかも）。
なお n（のような，どこでも使われるような変数）がグローバル変数というのは危険だと思いますので，
(function () {
....
} )();
のようにコードを関数ブロックに入れておけば，変数汚染を防ぐ可能性が高くなるかもしれません（ブックマークレットと同じ要領）。
-
3 名前： 匿名さん ： 2006/03/30 19:41
- 貼っていただいたjavascriptを試したところ
（念のためdocument.write("...<\/center>");と書いて）
うまくいきました！
お手数をおかけしてすみませんでした、本当にありがとうございます。
