webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

javascript ホームページ作成にあたって 画像が自動で入れ替わる

本日は、も備忘録的な記述ですが・・・

javascript ホームページ作成にあたって 画像が自動で入れ替わるやりかた。

 

はじめは DATEの秒数を使って入れ替えをやろうとおもったのですが、

自動で入れ替えは出来ず・・・。 気が付くのにしばらくかかりました(汗)

画面を開いた瞬間の条件で、表示される画像が変わるだけでした・・・(単純に2の倍数か?否か?でやってみました。)残念(T T)

 

で・・いろいろ調べていたら、下記の方法が!

ちなみに、ファイヤーフォックスのソース検証を行うと、エラーが出てきます。

どうしても???だったので先生にお聞きしました、本来はdivが適当だそうです。が書き換えると動きが止まってしまい(汗)まぁ動くから(^^)といいよ(笑)

と言って頂きました(汗)

ちなみに、エラー内容は、『name属性はちがうのでは?』という内容のものでした。

 

html

<img src="img/newfresh1.png" name="SP" alt="">
<script type="text/javascript">
<!--
var no=1;
img=new Array(2);
img[1]="img/newfresh2.png";
img[2]="img/newfresh1.png";
UP();
function UP(){
setTimeout("UP()",7000);
document.SP.src=img[no];
no=no+1
if(no>2){no=1;}
}
//-->
</script>

※画面を開いた瞬間に配置されている画像。

※入れ替わる画像。

※入れ替わる間隔の秒数

※入れ替わる画像の枚数。

 

ちなみに、画像ですが、表情だけを変える様にしたかったので、

1枚目をイラストレータで作成 → 保存。

2枚目は、1枚目を開く → 輪郭を絶対に動かさず!表情を変更 → 名前を変更して保存。

をすると、入れ替え時に目に優しい画像ができました。