中級編7

 画像切り替え技
   JavaScriptを使ってアルバム帳のようにしましょうか。


通常のHTMLではなくて、グラフィックや動きのあるホームページを作る時に FLASH というソフトが主流だった時期があります。 ところが、セキュリティホールが問題になり、adobe社もFLASHサポート終了宣言しました。 そこで、 JavaScript が台頭することに。このJavaScriptって、インターネット黎明期には活躍してたプログラミング言語ゆえに、 復活という感じですね。いやはや進化変化は激しい。

そんな経緯は気にされず、アルバムのページを捲る感じで写真を閲覧できるようにしてみましょう。下のサンプルをご覧ください。放っておいても5秒程度で ページが切り替わります。写真の左右にある>と<で捲ることも出来ます。また、写真の下の●ドットをクリックして画像を選べるスクリプトを使っています。

画像切り替えのHTML文は下記のように書きます。

<HTML>
<HEAD>
<!-- ここからスクリプトです。解説抜きで丸ごとコピーして使います。 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $('.slider').bxSlider({
                auto: true,
                pause: 5000,
            });
        });
</script>
<!-- スクリプトはここまで。HEADの中に記述のこと。 -->
</HEAD>
<!-- ここから画像データを指定して表示させます。 -->
<center>
<table><td width=270>
<div class="slider">
<img src="0.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
</td></table>
</center>
</HTML>

趣味の写真を公開したり、ハイキングルートを見せるの技として便利ではないでしょうか。
こうした Javascript は、中身を理解するより上手に利用することを優先させて下さい。 ネットに公開されているJavaScriptは、そういう意図で提供されていますので。
上記のHTML文( photo_album.html と名付けましょう)をパソコンのホームページ専用フォルダ myHP に保存されたら、この項は修了です。

質問メール  SCHOOL TOP