画像が自動的に切り替わる「スライドショー」を表示する方法をお伝えします。
画像が自動的に、横にスライドしていくと、ホームページの見栄えがとても良くなりますよね。
具体的には、下記のような「スライドショー」になります。
(5秒ごとに切り替わります)
このスライドショーは、HTMLだけでは実現できないので、「jQuery(ジェイクエリー)」というものを使います。
ただ、「コピペ」だけで、簡単に実現できるので、ぜひやってみてくださいね。
■ 画像が自動的に切り替わる「スライドショー」を表示する方法の手順
手順1:スライドショーを表示したいページのヘッダー
(</head>の真上)に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
【注意】
ソースを入れるページは、スライドショーを表示したいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
(ヘッダーの中に入れないと、動かないです)
手順2:スライドショーを表示したい箇所に、下記のソースを入れる。
<div class="slider">
<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」などにしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形ですね。
なお、上記のソースでは、4つの画像を順番に表示するようにしていますが、5つの画像を順番に表示させたい場合は、1行増やせば良いだけです。
(逆に、表示させたい画像を減らす場合は、1行消せば良いだけです)
あとは、スライドショーが正常に表示されていることを、確認してみてくださいね。
■【カスタマイズ方法】画像の大きさを変更する方法
上記のソースでは、画像の大きさは、横幅(width)は500、縦幅(height)は300で固定しています。
もし、画像の大きさを変えたい場合は、width とheight で指定している数字を、変更してみてください。
画像の大きさを変更することができます。
■【カスタマイズ方法】画像がスライドするスピードを変更する方法
ヘッダーに入れるソースの「pause」で指定している数字を変更すれば、画像がスライドするスピードを変えることができます。
現在は、「5000」にしていて、これは「5秒」という意味になりますよ。
【よく読まれている関連記事】
【おすすめ外部コンテンツ】
■ 当サイトで使用しているサンプルサイトを無料でダウンロード!
■ AIやChatGPTを使ってインターネットビジネスを行う講座