自動的に「ふわっ」と切り替わる画像を作る方法をお伝えします。
画像が瞬間的に切り替わる「アニメーション画像」ではなく、
画像が「ふわっ」と切り替わるため、見た目がとても良いです。
具体的には、下記のような画像になります。（５秒ごとに切り替わります）
ためしに、自動的に切り替わる「アニメーション画像」を作る方法で作成した画像と、見比べてみてください。
画像が瞬間的に切り替わると、ちょっと、忙しい感じがしてしまいますが、画像が「ふわっ」と切り替わると、印象は良いですよね？
実現方法はとても簡単なので、ぜひ試してみてくださいね！
■ 自動的に「ふわっ」と切り替わる画像を作る方法の手順
手順１：画像を表示したいページのヘッダー（</head>の真上）に、
下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
【注意】
ソースを入れるページは、画像を表示したいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）
手順２：画像を表示したい箇所に、下記のソースを入れる。
<div id="photo">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>
|
上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou1.jpg」などにしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形ですね。
なお、上記のソースでは、４つの画像を順番に表示するようにしていますが、５つの画像を順番に表示させたい場合は、１行増やせば良いだけです。
（逆に、表示させたい画像を減らす場合は、１行消せば良いだけです）
あとは、画像が正常に表示されていることを、確認してみてくださいね。
【注意】
「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、
HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。
■ ちょっとしたカスタマイズ方法
上記のソースでは、画像の大きさは、横幅（width）は500、縦幅（height）は300で固定しています。
もし、画像の大きさを変えたい場合は、width とheight で指定している数字を、変更してみてください。
なお、変更箇所は、ヘッダーに入れるソースと、画像を表示したい箇所に入れるソースに、それぞれあるので、両方とも変更してくださいね。
あとは、ヘッダーに入れるソースの「fadeSpeed」で指定している数字を変更すれば、画像がフェードするスピードを変えることができます。
また、「switchDelay」で指定している数字を変更すれば、画像が切り替わる時間を変えることができますよ。
ちなみに、指定している数字は、「ミリ秒」になるので、5000と指定すれば、「5秒」という意味です。
【よく読まれている関連記事】
