###前提・実現したいこと
JavaScriptでスライドショーを作っております。
画像ファイルのダイレクトリ一覧が入った配列変数を別ファイル(A6_load.js)にて作成し、メインのjsファイルに読み込み画像を表示させようと思っております。
条件:
- Ajaxを使って画像一覧を読み込む(画像パスは外部ファイルのJSONに記載)
のみで他条件は変更可能です
###A6_load.js
var files = [ 'images_A6/IMG_01.jpg', 'images_A6/IMG_02.jpg', 'images_A6/IMG_03.jpg', 'images_A6/IMG_04.jpg', 'images_A6/IMG_05.jpg', ];
###main.js
$(function () { var thumbnails = document.getElementById('thumbnails'); $.ajax({ url: 'A6_load.json', //dataType: 'text', success: function (data) { var i; var li; var img; for (i = 0; i < data.files.length; i++) { console.log(data.files[i]); li = document.createElement('li'); li.addEventListener('click', function () { target.src = this.children[0].src; }); img = document.createElement('img'); img.src = data.files[i]; li.appendChild(img); thumbnails.appendChild(li); } } }); }); (function () { 'use strict'; var currentNum = 0; var prev = document.getElementById('prev'); var next = document.getElementById('next'); var target = document.getElementById('target'); prev.addEventListener('click', function () { currentNum--; if (currentNum < 0) { currentNum = files.length - 1; } console.log(files[currentNum]); target.src = files[currentNum]; }); next.addEventListener('click', function () { currentNum++; if (currentNum > files.length - 1) { currentNum = 0; } console.log(files[currentNum]); target.src = files[currentNum]; }); })();
###発生している問題・エラーメッセージ
7行目のforループのところで「Uncaught TypeError」というのが出て、「files(配列変数)のプロパティ(length)が取得できませんでした」というようなメッセージが出ます。
配列に全くこだわりはないですが、この後Updateボタンを作って画像が追加されたときにすぐに更新できるようにAjaxを使って画像データーを取得しろという指示なので配列を使ってみました。どなたかわかる方がいらっしゃったら教えてください。
回答1件
あなたの回答
tips
プレビュー