選択した複数枚の画像をスライドショーのように切り替えたい

前提・実現したいこと

　javascriptで，複数枚選択した画像ファイルをスライドショーのように表示させるプログラムを組もうとしています．
選択した画像を表示することまでは出来たのですが，その先ができません．
画像の表示される位置は固定で，アニメのように画像を移り変わらせる方法はないのでしょうか．

http://oekakirenn.webcrow.jp/slide_k/slide_k1_1.html

始めはこちらのサイトを参考にして作っておりましたが，選択した画像を表示させたいと考え，作り直した次第です．

発生している問題・エラーメッセージ

現在のソースコードでのエラーはありません．

エラーメッセージ

該当のソースコード

javascript
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8"> 
5</head>
6<body>
7<h1>&lt;input type="file"&gtで選択した画像をすぐに表示する</h1>
8<font color='red'>(複数の画像ファイルを選択できます)</font>
9<script type="text/javascript" language="javascript">
10<!--
11function OnFileSelect( inputElement )
12{
13    // ファイルリストを取得
14    var fileList = inputElement.files;
15 
16    // ファイルの数を取得
17    var fileCount = fileList.length;
18 
19    var loadCompleteCount = 0;
20    var imageList = "";
21 
22    // 選択されたファイルの数だけ処理する
23    for ( var i = 0; i < fileCount; i++ ) {
24 
25        // FileReaderを生成
26        var fileReader = new FileReader();
27 
28        // ファイルを取得
29        var file = fileList[ i ];
30 
31        // 読み込み完了時の処理を追加
32        fileReader.onload = function() {
33 
34            // <li>,<img>タグの生成
35            imageList += "<li><img src=\"" + this.result + "\" /></li>\r\n";
36 
37            // 選択されたファイルすべの処理が完了したら、<ul>タグに流し込む
38            if ( ++loadCompleteCount == fileCount ) {
39 
40                // <ul>タグに<li>,<img>を流し込む
41                document.getElementById( "ID001" ).innerHTML = imageList;
42            }
43        };
44 
45        // ファイルの読み込み(Data URI Schemeの取得)
46        fileReader.readAsDataURL( file );
47    }
48}
49// -->
50</script>
51<input type="file" onchange="OnFileSelect( this );" multiple />
52<ul id="ID001" ></ul>
53</body>
54</html>

補足情報（FW/ツールのバージョンなど）

サクラエディタにて編集しております

m.ts10806

2018/12/03 07:01

「スライドショーするプラグイン」の利用はせずに、あくまで自力で作りこみたいということでしょうか。

muccinpurin

2018/12/03 07:10

ご返信ありがとうございます．そうです．画像遷移の間隔や，表示する画像の順番などを今後操作していく可能性があるため，プラグインでは不十分かと考えました．

m.ts10806

2018/12/03 07:18

うーん。詳細要件次第ですけど今あげられた２つくらいだとプラグインで対応可能かとは思います。そうでなければひとまず「自作スライドショー」で検索して真似してみるかどうかかなと。完全自作であれば「スライドショーはどんな動きをしているか」要件を細分化して理解する必要がありますよね。あとは画面描画後、動的に画像を入れてるので「スライドショー開始のトリガー」さえ気を付ければ如何様にも実装は可能に思います。

muccinpurin

2018/12/03 09:23

ご丁寧にありがとうございます。まだ勉強不足でした。実際にプラグインを実装してみて、足りないところがあれば再度自作を検討しようと思います。ご指摘ありがとうございました。