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

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

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

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

HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

604閲覧

スライドショーのリンク設定がうまくいかず悩んでいます

tt_360

総合スコア29

CSS3

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

HTML5

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

JavaScript

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

jQuery

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

1グッド

1クリップ

投稿2023/04/14 05:54

編集2023/04/14 07:24

サイトのスライドショーのリンク設定がうまくいかず悩んでいます。
スライドショーの画像は、ユーザーの見る画面によって高さが変わる仕様になっています。
一番先頭だけにリンクを設置したいのですが、aタグを付けてもリンクになりません。
原因がわかる方教えてください。

また、一番最初の画像だけスライドショーの表示時間を長くすることも可能でしたらそちらも教えていただけるとありがたいですm(_ _)m

<script> $(window).on('load resize', function() { $('#slideshow').height($('#slideshow img').outerHeight(true)); }); </script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> jQuery(function($) { $('.link-box').css('cursor','pointer'); $('.link-box').on('click',function () { window.location.href = $(this).find('a').attr('href'); }); }); </script> <script> $(function(){ //#で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 //ヘッダーの高さ var hedderHeight = 87; var position = target.offset().top - hedderHeight; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); // 別ページからのリンク $(window).on('load', function() { var headerHight = 87; //ヘッダの高さ if(document.URL.match("#")) { var str = location.href ; var cut_str = "#"; var index = str.indexOf(cut_str); var href = str.slice(index); var target = href; var position = $(target).offset().top - headerHight; $("html, body").scrollTop(position); return false; } }); </script>
<ul id="slideshow" class="slideshow"> <li class="showSlide"><a href="#"><img src="images/0.jpg" alt=""></a></li> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> <li><img src="images/5.jpg" alt=""></li> <li><img src="images/6.jpg" alt=""></li> <li><img src="images/7.jpg" alt=""></li> <li><img src="images/8.jpg" alt=""></li> <li><img src="images/9.jpg" alt=""></li> <li><img src="images/10.jpg" alt=""></li> </ul>
.slideshow { width: 100%; list-style-type: none; position: relative; } .slideshow > li { opacity: 0; position: absolute; transition: opacity 3s ease-in-out; } .slideshow > li.showSlide { opacity: 1; } .slideshow > li > a > img { display: block; max-height: 100vh; max-width: 100vw; margin: 0 auto; } .slideshow > li > img { display: block; max-height: 100vh; max-width: 100vw; margin: 0 auto; }
shinoharat👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

一番先頭だけにリンクを設置したいのですが、aタグを付けてもリンクになりません。

単に opacity: 0 とだけ指定すると、「透明になってるので目には見えないけど、要素自体は存在する」状態になります。透明な li 要素が手前に存在するので、それより奥にある a 要素をクリックできません。
(透明なガラスの向こう側にあるボタンは押せない、というイメージです)

pointer-events を使えば、透明な要素をスルーして、その奥にあるリンクを押せるようになります。

diff

1 .slideshow > li { 2 opacity: 0; 3+ pointer-events: none; /* 目に見えないしクリックもできない */ 4 position: absolute; 5 transition: opacity 3s ease-in-out; 6 } 7 8 .slideshow > li.showSlide { 9 opacity: 1; 10+ pointer-events: auto; /* 目に見えるしクリックもできる */ 11 }

--

一番最初の画像だけスライドショーの表示時間を長くする

質問文の javascript を見る限り、次のスライドに移るコードが見当たらないので、このままだと永遠に1枚目の画像が出続ける気がします。
どのようなスクリプトでスライドショーを行っているのか質問文に追加していただければ、何か答えられるかもしれません。

コメントありがとうございます。
現在は以下の処理でスライドショーを行っているのですね。

js

1$(function(){ 2 var imgs = $("#slideshow > li"); 3 var imgLen = imgs.length; 4 var count = 0; 5 function changeImg(){ 6 count = (count + 1) % imgLen; 7 imgs.removeClass("showSlide").eq(count).addClass("showSlide"); 8 } 9 setInterval(changeImg, 5000); 10})

setInterval だと、5秒置きにしか処理が実行できないので、特定のスライドだけ時間を延ばすことができません。
そのため、 await を使って、任意の時間だけ処理を停止させる sleep 関数を自作する必要があります。

js

1 // 引数に指定した値(ミリ秒)だけ、処理を停止させる。 2 function sleep(ms) { 3 return new Promise(function(resolve){ setTimeout(resolve, ms) }) 4 }

上記の sleep を使えば、スライドごとに表示時間を変えることができます。

js

1async function startSlideshow() { 2 while(true) { 3 if(count == 0) { 4 await sleep(8000); // 最初のスライドだけ8秒停止 5 } else { 6 await sleep(5000); // 他のスライドは5秒停止 7 } 8 changeImg(); // スライドの切り替え 9 } 10}

最後に、 setIntervalstartSlideshow に差し替えます。

diff

1 $(function(){ 2 var imgs = $("#slideshow > li"); 3 var imgLen = imgs.length; 4 var count = 0; 5 function changeImg(){ 6 count = (count + 1) % imgLen; 7 imgs.removeClass("showSlide").eq(count).addClass("showSlide"); 8 } 9 10+ // 引数に指定した値(ミリ秒)だけ、処理を停止させる関数。 11+ function sleep(ms) { 12+ ... 13+ } 14 15+ // スライドショーを開始する関数。 16+ async function startSlideshow() { 17+ ... 18+ } 19 20- setInterval(changeImg, 5000); 21+ startSlideshow(); 22 })

これで、最初のスライドだけ表示時間を延ばすことができると思います。
お試しください。

投稿2023/04/14 07:08

編集2023/04/17 09:32
shinoharat

総合スコア1685

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

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

tt_360

2023/04/14 07:25

すみません。 javascriptを追記しました。これでわかるでしょうか?
tt_360

2023/04/14 07:29

リンクはできました!ありがとうございます(T_T)
shinoharat

2023/04/14 07:44

追記ありがとうございます。 ただ、追記してもらったコードは、「スライドショー」ではなく「スムーススクロール」関連の処理に見えます。 各画像の表示/非表示は「showSlide」というクラスの有無で制御しているので、  element.classList.add("showSlide"); とか  $(...).addClass("showSlide"); みたいなコードをどこかに書いてるんじゃないかと思いますが、どうでしょうか?
shinoharat

2023/04/14 07:45

あるいは、何かライブラリを使ってて、自分ではスライドショーのコードを書いてなかったりしますかね? その場合はライブラリの名前を教えてもらえると助かります。
tt_360

2023/04/17 00:11

お返事大変遅くなりすみません。 $(function(){ var imgs = $("#slideshow > li"); var imgLen = imgs.length; var count = 0; function changeImg(){ count = (count + 1) % imgLen; imgs.removeClass("showSlide").eq(count).addClass("showSlide"); } setInterval(changeImg, 5000); }) これでしょうか? 無知で見当違いなことばかり言ってたら申し訳ございません(T_T)
shinoharat

2023/04/17 09:32

コメントありがとうございます。 回答を編集し、一番最初の画像だけスライドショーの表示時間を長くする方法を追記しました。 ご確認ください。
tt_360

2023/04/19 01:05

ご丁寧に最後まで教えていただきありがとうございました。とても助けられました(T_T)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問