サイトのスライドショーのリンク設定がうまくいかず悩んでいます。
スライドショーの画像は、ユーザーの見る画面によって高さが変わる仕様になっています。
一番先頭だけにリンクを設置したいのですが、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; }

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/04/14 07:25
2023/04/14 07:29
2023/04/14 07:44
2023/04/14 07:45
2023/04/17 00:11
2023/04/17 09:32
2023/04/19 01:05