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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

633閲覧

[JavaScript]画像を自動でスライドさせつつクリックしたら進ませたい

neroS2eng

総合スコア16

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/02 17:32

編集2022/01/12 10:55

前提・実現したいこと

画像5枚を5秒ごとに自動でスライドさせつつ、
5秒以内にクリックしたら次の画像に行くようにしたいです。

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

画像の自動切り替え、クリックで切り替えの機能は
個別ではうまく動作してくれるのですが、
自動切り替えの後にクリックすると、画像が切り替わらなくなります。

自動切り替えはCSSで、クリックアクションはJSで実装しているから
不具合が起こるのでしょうか?

該当のソースコード

HTML

1<section id="top"> 2 <div class="slide" id="makeImg"> 3 <img src="./img/top1.jpg" id="top1" alt="画像1"> 4 <img src="./img/top2.jpg" id="top2" alt="画像2"> 5 <img src="./img/top3.jpg" id="top3" alt="画像3"> 6 <img src="./img/top4.jpg" id="top4" alt="画像4"> 7 <img src="./img/top5.jpg" id="top5" alt="画像5"> 8 </div> 9 10 <script> 11 let setImgFunc = (function(){ 12 let imgList = {image1:"top1.jpg", image2:"top2.jpg", image3:"top3.jpg", image4:"top4.jpg", image5:"top5.jpg"}; 13 let num = 1; 14 let imgPath; 15 return function() { 16 num++; 17 imgPath = "./img/"+imgList['image'+num]; 18 testImg = document.querySelector('#makeImg img').src = imgPath; 19 if (num === 5) { 20 num = 0; 21 } 22 } 23 })(); 24 document.getElementById('makeImg').addEventListener('click', function(){ 25 setImgFunc(); 26 }); 27 </section>

CSS

1.slide { 2 position : relative; 3 overflow : hidden; 4 top : 0; 5 width : 100%; 6 height : 650px; 7 margin : auto; 8} 9 10 /*=== 画像の設定 ======================================= */ 11.slide img { 12 display : block; 13 position : absolute; 14 width : 100%; 15 height : auto; 16 opacity : 0; 17 animation : slideAnime 30s ease infinite; 18} 19 20 /*=== スライドのアニメーションを段差で開始する ========= */ 21.slide img:nth-of-type(1) { animation-delay: 0s } 22.slide img:nth-of-type(2) { animation-delay: 6s } 23.slide img:nth-of-type(3) { animation-delay: 12s } 24.slide img:nth-of-type(4) { animation-delay: 18s } 25.slide img:nth-of-type(5) { animation-delay: 24s } 26 27 /*=== スライドのアニメーション ========================= */ 28@keyframes slideAnime{ 29 0% { opacity: 0 } 30 3% { opacity: 1 } 31 20% { opacity: 1 } 32 23% { opacity: 0 } 33 100% { opacity: 0 } 34}

試したこと

<Script>の記述にスライドの自動切り替えを追記してCSSの.slideクラスでの動作を削除してみたのですが、画面が白く(imgが反映されていない)なってしまいうまく動作しませんでした。 ```HTML <div class="slide" id="makeImg"> <img src="./img/top1.jpg" id="top1" alt="画像1"> </div> <script> let setImgFunc = (function(){ let imgList = {image1:"top1.jpg", image2:"top2.jpg", image3:"top3.jpg", image4:"top4.jpg", image5:"top5.jpg"}; let num = 1; let imgPath; return function() { num++; imgPath = "./img/"+imgList['image'+num]; testImg = document.querySelector('#makeImg img').src = imgPath; if (num === 5) { num = 0; } } })();         //追記 setInterval(function(){   setImgFunc2();   }, 5000) document.getElementById('makeImg').addEventListener('click', function(){ setImgFunc(); }); </script>
よろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/11/06 02:25

swiper.jsではダメですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問