Q&A
前提・実現したいこと
JavaScriptを独学で勉強しているものです。矢印やドットナビをクリックすると画像が変わるスライドショーを作成したいです。
HTMLのコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Java Script Practice Slide Show</title> <link rel="stylesheet" href="../slide-css/slide.css"> </head> <body> <div class="slider"> <ul class="slider-inner"> </ul> <ul class="nav"> </ul> <p id="arrow-prev" class="arrow">←</p> <p id="arrow-next" class="arrow">→</p> </div> <script src="../slide-js/slide.js"></script> </body> </html>CSSのコード
.slider .slider-inner li.show{
opacity: 1;
}
.slider .nav li.current {
background: #aaa
}
JavaScriptのコード
var imgList = [
"../slide-images/img01.jpg"
"../slide-images/img02.jpg"
"../slide-images/img03.jpg"
"../slide-images/img04.jpg"
];
//画像とナビの要素を自動で追加
for(var i = 0; i < imgList.length; i++) {
//li要素を取得
var slide = document.createElement('li');
//li要素の中に画像タグを埋め込む
slide.innerHTML = "<img src = '" + imgList[i] + "'>";
//li要素をクラス名「slider-inner」の子要素として追加
document.getElementsByClassName("slider-inner")[0].appendChild(slide);
//li要素を取得
var nav = document.createElement("li");
//プロパティ「data-nav-index」に数値を割り振る
nav.setAttribute("data-nav-index",i);
//li要素をクラス名「nav」の子要素として追加
document.getElementsByClassName("nav")[0].appendChild(nav);
}
//スライドの数を取得(処理のために-1する)
var length = imgList.length - 1;
//クラス名「imageSlide」に画像の1枚の要素を格納
var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
//クラス名「dotNavigation」にドットナビの1つの要素を格納
var dotNavigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li");
//「現在○○枚目の画像を表示している」というインデックス番号を格納する変数
var nowIndex = 0;
//現在表示されている画像とドットナビにクラス名をつける
imageSlide[nowIndex].classList.add("show");
dotNavigation[nowIndex].classList.add("current");
//スライドがアニメーション中か判断するフラグ
var isChanging = false;
//スライド切り替え時に呼び出す関数
var slideTimer;
//スライド切り替え時に呼び出す関数
function sliderSlide (val) {
if (isChanging === true) {
return false;
}
isChanging = true;
//現在表示している画像とナビからクラス名を削除
imageSlide[nowIndex].classList.remove("show");
dotNavigation[nowIndex].classList.remove("current")
nowIndex = val;
//次に表示する画像とナビにクラス名を付与
imageSlide[nowIndex].classList.add("show");
dotNavigation[nowIndex].classList.add("current");
//アニメーションが終わるタイミングでisChangingのステータスをfalseに
slideTimer = setTimeout(function () {
isChanging = false;
}, 600);
}
//左矢印のナビをクリックしたときのイベント
document.getElementById("arrow-prev").addEventListener("click", fuction(){
var index = nowIndex - 1;
if(index < 0){
index = length;
}
slideSlider(index);
},false);
//右矢印のナビをクリックしたときのイベント
document.getElementById("arrow-next").addEventListener("click",function(){
var index = nowIndex + 1;
if (index > length){
index = 0;
}
sliderSlide(index);
}, false);
//ドットナビをクリックしたときのイベントを作成
for(var i = 0; i < dotNavigation.length; i++){
//データ属性のインデックス番号を元にスライドを行う
dotNavigation[i].addEventListener("click", function(){
var index = Number(this.getAttribute("data-nav-index"));
},false);
}
これをコンソールしたときにjavascriptのコードの3行目"../slide-images/img02.jpg"で
Uncaught SyntaxError: Unexpected stringというエラーが出ました。2行目はエラーは出ずに3行目で出る理由がわかりません。また、エラーの対処方法を教えてください。ちなみに、ファイルのスペルミスなども確認しましたがそれではなかったです。
さらにjavascriptの最後の方の左矢印、右矢印、ドットナビをクリックしたときのイベントを書くとき最後にfalseがあるのですがなぜその場所に置かれているのか、またこのfalseの役割を教えてください。
回答1件
0
ベストアンサー
Uncaught SyntaxError: Unexpected stringというエラーが出ました。2行目はエラーは出ずに3行目で出る理由がわかりません。
JavaScriptは、（セミコロンが補われる場合はありますが）改行は基本的にスペースと同じ意味です。行頭にコンマを打つような書き方でも矛盾しないので、「エラーである」ことは3行目に来ないと確定しません。
javascript
1// 文法的にはこう書いても問題なし 2var imgList = [ 3"../slide-images/img01.jpg" 4, "../slide-images/img02.jpg" 5];
投稿2021/08/15 10:42
総合スコア146018
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/15 10:48
2021/08/15 13:14 編集
2021/08/15 13:42