国立デジタルPDFからJPEG画像が取れたので、これをスライドショーで表示したいと思います。
先ずは左クリックで次の画像を出すだけの単純なスクリプトを書きます。この動画が参考になりました：
Simple JavaScript Slideshow In 5 Minutes
テスト用に、読み上げ起こし２冊目を予定している『偉人の言葉』の最初の10枚を使って、単純なスライドショーを作ってみます。
とりあえず動いた。
<div>
<script>
var i = 0; // 開始番号
var images = []; // 画像ファイル名の配列
// 画像リスト
images[0] = "/asset/2020/10-17a/slide0002b.jpg";
images[1] = "/asset/2020/10-17a/slide0003b.jpg";
images[2] = "/asset/2020/10-17a/slide0004a.jpg";
images[3] = "/asset/2020/10-17a/slide0004b.jpg";
images[4] = "/asset/2020/10-17a/slide0005a.jpg";
images[5] = "/asset/2020/10-17a/slide0005b.jpg";
images[6] = "/asset/2020/10-17a/slide0006a.jpg";
images[7] = "/asset/2020/10-17a/slide0006b.jpg";
images[8] = "/asset/2020/10-17a/slide0007a.jpg";
images[9] = "/asset/2020/10-17a/slide0007b.jpg";
// 画像変更
function changeImg(){
document.slide.src = images[i];
// インデックス番号が配列の要素数以内かチェック
if (i < images.length - 1) {
// インデックス番号を一つずつ増やす
i++;
}
else {
// インデックス番号をゼロにする
i = 0;
}
}
// ページが読み込まれたらchangeImg()を実行
window.onload=changeImg;
</script>
<img name="slide" style="width:660px; height:820px; border:1px solid;" onclick="changeImg()">
</div>
実用的なものにするために、あと少し機能を追加したいです。
- 右クリックで前のページに戻る
- 現在ページ番号と総ページ数の表示
- ページ番号入力でジャンプ
Javascriptは慣れていないので、ちゃちゃっとは書けないです…。
