単純なスライドショーに少し機能追加 -

前回、画像をクリックすると次のページに変わるスクリプトを書きました。このスクリプトに右クリックで前のページに戻る機能と50ページごとのジャンプ機能を追加します。

見様見真似のスクリプト…。まあ思い通りに動いているので、いいことにします。

<div onContextmenu="return false;" class="slidePgNo">
<select id="PgJump">
<option value="0">まとめ移動</option>
<option value="50"> 50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;<span id="PageNo"></span> / <span id="Total"></span>
<hr style="margin-top: 5px">
<script>
    var i = 0; 			// 開始番号
    var images = [];	// 画像ファイル名の配列

    // 画像リスト
    images[0] = "/asset/2020/10-18/slide0002b.jpg";
    images[1] = "/asset/2020/10-18/slide0003b.jpg";
    images[2] = "/asset/2020/10-18/slide0004a.jpg";
    images[3] = "/asset/2020/10-18/slide0004b.jpg";
    //
    // 中略
    //
    images[209] = "/asset/2020/10-18/slide0107b.jpg";

    //タイトルページ
    function titlePage() {
        document.slide.src = images[0];
        document.getElementById("Total").textContent = images.length;
        }

    //まとめ移動
    var selected = document.getElementById("PgJump");
    selected.onchange = function() {
        var jStr = document.getElementById("PgJump").value;
        i = jStr;
        document.getElementById("PageNo").textContent = i;
        document.slide.src = images[i];
    }

    // 左クリックで次
    function changeImg(){
        if (i < images.length - 1) {
            // インデックス番号を一つずつ増やす
            i++; }
        else {
            // インデックス番号をゼロにする
            i = 0; }
        document.getElementById("PageNo").textContent = i;
        document.slide.src = images[i];
        }

    // 右クリックで前
    function changeImg2(){
        if (i >= 2) {
            // インデックス番号を一つずつ減らす
            i--; }
        else {
            // インデックス番号をゼロにする
            i = 0; }
        document.getElementById("PageNo").textContent = i;
        document.slide.src = images[i];
        }

    // ページが読み込まれたらタイトルページを表示
    window.onload = titlePage;
</script>
<img name="slide" style="width:660px; height:820px; border:1px solid;" onclick="changeImg()" oncontextmenu="changeImg2()">
</script>
</div>

△

読み上げ起こし

単純なスライドショーに少し機能追加

右クリックで前ページに戻る

関連記事