質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

解決済

1回答

1536閲覧

JavaScript スライドショー作成  falseの位置とフォルダ間でのエラー

Yuriika4

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

0クリップ

投稿2021/08/15 10:34

前提・実現したいこと

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の役割を教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yuriika4

2021/08/15 13:14 編集

falseの位置の意味、imgList配列の,忘れについて迅速な回答ありがとうございました。 また見直していると//左矢印のナビをクリックしたときのイベント のfuctionスペルミス、同じく//左矢印のナビをクリックしたときのイベント のslideSliderのスペルミスが発見できてエラーがなくなりました。 しかしコンソールしてみると画像がスライドするのではなくて縦に四枚並べられていて箇条書きの時に使う・みたいなのがいっぱい散らばっていました。 この問題を解決するためにはどうすればよいでしょうか?
Yuriika4

2021/08/15 13:42

また見直していたらこんなCSSでは作れるわけがないと気づきました。CSSをもっと詳しく書く必要があると思うのでそちらに挑戦しようと思います。 回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問