前提・実現したいこと
html・CSS・jqueryで、あるサイトの模倣をしています。
何を試してもslideshowの次に記述した文がslideshowに潜ってしまいます。
該当のソースコード
html
1<div id="top"> 2 <div id="slideshow"> 3 <img src="img/kei1.jpg" alt="kei1" class="active"> 4 <img src="img/kei2.jpg" alt="kei2"> 5 <img src="img/kei3.jpg" alt="kei3"> 6 <img src="img/kei4.jpg" alt="kei4"> 7 </div> 8 </div> 9 <div id="main"> 10 <div class="news"> 11 <h2>WHAT'S NEWS</h2> 12 <div class="newsBox"> 13 <div class="newsBox-1"> 14 <a href=""> 15 <img src=""> 16 <div> 17 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 18 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 19 </div> 20 </a> 21 </div>
CSS
1.news:before { 2 content: ""; 3 width: 100%; 4 height: 702px; 5} 6 7#slideshow { 8 position: relative; 9 width: 100%; /* 画像の横幅に合わせて記述 */ 10 height: 100px; /* 画像の高さに合わせて記述 */ 11} 12#slideshow img { 13 width: 100%; 14 height: auto; 15 position: absolute; 16 top: 0; 17 left:0; 18 z-index: 1; 19 opacity: 0.0; 20} 21#slideshow img.active { 22 z-index: 3; 23 opacity: 1.0; 24} 25#slideshow img.last-active { 26 z-index: 2; 27}
js
1function slideSwitch() { 2 var $active = $('#slideshow img.active'); 3 4 if ( $active.length == 0 ) $active = $('#slideshow img:last'); 5 6 var $next = $active.next().length ? $active.next() 7 : $('#slideshow img:first'); 8 9 $active.addClass('last-active'); 10 11 $next.css({opacity: 0.0}) 12 .addClass('active') 13 .animate({opacity: 1.0}, 1000, function() { 14 $active.removeClass('active last-active'); 15 }); 16} 17 18$(function() { 19 setInterval( "slideSwitch()", 3000 ); 20}); 21
試したこと
・clearfix
・記述文の前に::afterでslideshowの高さのboxを入れた。
回答1件
あなたの回答
tips
プレビュー