Q&A
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
https://teratail.com/help/question-tips#questionTips3-5-1
前提・実現したいこと
ふわっと切り替わるスライドバナーを作成して完成しましたが、これにリンクを付けたいのですがリンクを付けると1枚しかふわっとしません。
教えてください。 どうぞ宜しくお願いいたします。
該当のソースコード
<script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <style type="text/css"> #slideshow { position: relative; width: 728px; height: 280px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; } </style> </head> <body> <p id="slideshow"> <a href=""> <img src="" alt="" /></a> <a href=""> <img src="" alt="" /></a> <a href=""> <img src="" alt="" /></a> <a href=""> <img src="" alt="" /></a> <a href=""> <img src="" alt="" /></a> <a href=""> <img src="" alt="" /></a> </p></body></html>試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
こんにちは。
html
1<p id="slideshow"> 2<a href=""> 3<img src="" alt="" /></a>
となっているところ、スクリプトは、
js
1var $active = $('#slideshow img.active'); 2 3if ( $active.length == 0 ) $active = $('#slideshow img:last'); 4 5var $next = $active.next().length ? $active.next() 6: $('#slideshow img:first');
こうなっています。
imgには兄弟がいないので、$active.next().lengthは必ず0になると思います。
解決方法ですが、imgではなくてaをターゲットにしてみてはいかがでしょうか。
投稿2021/06/11 08:46
総合スコア36115
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow a.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
ありがとうございます。
1箇所だけaに変えた所、1枚のみ、ふわっと切り替わりリンクも付きましたが、ほか5枚の画像は切り替わりませんでした。
今の所6枚の画像を、ふわっと切り替えてリンクを付けたいのですが...
var $active = $('#slideshow a.active');
この部分を変えました。
全6枚を、ふわっと切り替わるスライドにしてリンクをつけるには、ほか、何処を修正したほうが宜しいでしょうか。 どうぞ宜しくお願いいたします。
試していませんので推測ですが、imgのところ全部ですかね？ CSSも含めて。
$active = $('#slideshow a:last');
今ここも↑aに変えましたが、やはり1枚のみでした(-_-;)
おお、そうでしたか。
それ以上は、試してみないと何とも言えないので、とりあえず質問を整形してもらっていいですか？
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow a.active');
if ( $active.length == 0 ) $active = $('#slideshow a:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow a:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
ありがとうございます。
やはり全てをaに変えてもダメでした...
整形？
CSSも変えましたか？
質問と回答の間に「質問への追記・修正、ベストアンサー選択の依頼」という欄があるんですよ。
そこに、私が修正依頼を書いたのですが、読みました？
ありがとうございます。 CSSもaに変えたら6枚とも切り替わりスライドしてリンクも付きました(^▽^)♪が......若干、5ミリ位、次の画像だと思いますが見えちゃってます。
それを見えなくするには、どこを修正すれば宜しですか？ CSSの修正ですか？
あ！ はい。読みましたが意味が分からなくて...すみませんm(__)m
貼っていただいたコード、文字が化けてるじゃないですか？
コードを貼る時は、コードを選択して、メニューにある「<code>」ってボタンを押すと、きれいに貼れます。
0
自己解決
<script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <style type="text/css"> #slideshow { position: relative; width: 728px; height: 280px; } #slideshow a { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow a.active { z-index: 10; opacity: 1.0; } #slideshow a.last-active { z-index: 9; } </style> </head> <body> <p id="slideshow"> <a href=""> <img src="" alt="" class="active"></a>
<img src="" alt=""></a>
一か八かで この active を取り除いたら解決しました。
ありがとうございました。 質問して良かったです。
投稿2021/06/11 10:54
総合スコア0
あなたの回答
tips
プレビュー
