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

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

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

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

Q&A

解決済

1回答

3446閲覧

スライドショーの画像が表示されない

sirokuro

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2020/03/31 11:37

前提・実現したいこと

スライドショーを実現

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

途中まで画像が表示されていたのですが、表示されなくなってしまいました。
コードミスかと思って確認しましたが、直しても未だ表示されません。
どこを直したらよいでしょうか?

### 該当のソースコード ```HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>スライダー</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/layout.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="js/index.js"></script> </body> </html>

css

1.slider { 2 position: relative; 3 width: 640px; 4 height: 480px; 5 margin: 0 auto 6} 7 8.slider .slider-inner { 9 position: relative; 10 top: 0; 11 left: 0; 12 width: 100%; 13 height: 100% 14} 15 16.slider .slider-inner li { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 opacity: 0; 23 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 24 -webkit-transition: all 600ms; 25 transition: all 600ms; 26 pointer-events: none 27} 28 29.slider .slider-inner li.show { 30 opacity: 1; 31 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 32 z-index: 1; 33 pointer-events: auto 34} 35 36.slider .nav { 37 width: 100%; 38 margin-top: 20px; 39 text-align: center; 40 font-size: 0 41} 42

css

1@charset "utf-8"; 2/* 3html5doctor.com Reset Stylesheet 4v1.6.1 5Last Updated: 2010-09-17 6Author: Richard Clark - http://richclarkdesign.com 7Twitter: @rich_clark 8*/ 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin: 0; 22 padding: 0; 23 border: 0; 24 outline: 0; 25 font-size: 100%; 26 vertical-align: baseline; 27 background: transparent; 28} 29 30body { 31 line-height: 1; 32} 33 34article, aside, details, figcaption, figure, 35footer, header, hgroup, menu, nav, section { 36 display: block; 37} 38 39nav ul { 40 list-style: none; 41} 42

javaScript

1// スライダーに表示する画像 2var imgList = [ 3 "images/img01.jpg", 4 "images/img02.jpg", 5 "images/img03.jpg", 6 "images/img04.jpg" 7]; 8 9// 画像とナビの要素を自動で追加 10for (var i = 0; i < imgList.length; i++){ 11 // li要素を取得 12 var slide = document.createElement("li"); 13 // li要素の中に画像タグを埋め込む 14 slide.innerHTML = "<img src='" + imgList[i] + "'>"; 15 // li要素をクラス名「slider-inner」の子要素として追 16 document.getElementsByClassName("slider-inner")[0].appendChild(slide); 17 // li要素を取得 18 var nav = document.createElement("li"); 19 // プロパティ「data-nav-index」に数値を割り振る 20 nav.setAttribute("data-nav-index", i); 21 // li要素をクラス名「nav」の子要素として追加 22 document.getElementsByClassName("nav")[0].appendChild(nav); 23} 24 25 var length = imgList.length - 1; 26 var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li"); 27 var dotNabigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li"); 28 var nowIndex = 0; 29 30// 現在表示されている画像とドットナビにクラス名を付ける 31 imageSlide[nowIndex].classList.add("show"); 32 dotNavigation[nowIndex].classList.add("current"); 33// スライドがアニメーション中か判断するフラグ 34 var isChanging = false; 35// スライドのsetTimeoutを管理するタイマー 36 var slideTimer; 37// スライド切り替え時に呼び出す関数 38 function sliderSlide(val){ 39 if (isChanging === true){ 40 return false: 41 } 42 isChanging = true; 43 imageSlide[nowIndex].classList.remove("show"); 44 dotNavigation[nowIndex].classList.remove("current"); 45 nowIndex = val; 46 imageSlide[nowIndex].classList.add("show"); 47 dotNavigation[nowIndex].classList.add("current"); 48 slideTimer = setTomeout(function(){ 49 isChanging = false; 50 }, 600); 51} 52 53 54// 左矢印のナビをクリックした時のイベント 55document.getElementById("arrow-prev").addEventListener("click",function(){ 56 var index = nowIndex - 1; 57 if(index < 0){ 58 index = length; 59} 60 sliderSlide(index); 61}, false); 62 63 64// 右矢印のナビをクリックした時のイベント 65document.getElementById("arrow-next").addEventListener("click", function(){ 66 var index = nowIndex + 1; 67 if(index > length){ 68 index = 0; 69} 70 sliderSlide(index); 71}, false); 72 73// ドットナビをクリックした時のイベントを作成 74for (var i = 0; i < dotNavigation.length; i++){ 75 dotNavigation[i].addEventListener("click", function(){ 76 var index = Number(this.getAttribute("data-nav-index")); 77 sliderSlide(index); 78 }, false); 79}

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

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

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

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

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

guest

回答1

2

ベストアンサー

セミコロンではなくコロンになっている箇所があるようです。

// スライド切り替え時に呼び出す関数 function sliderSlide(val){ if (isChanging === true){ return false: /* セミコロンではなくコロンになっている */ }

投稿2020/03/31 11:53

new1ro

総合スコア4528

sirokuro, kei344👍を押しています

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

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

sirokuro

2020/03/31 12:31

ホントだ・・・直したら画像表示されました! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問