スライドショーをした画像の上に文字をいれたいのですが、
なぜか下に隠れてしまいます。どうしたらできますか?
html
1 <body class="index"> 2 <div class="wrapper"> 3 4 <header> 5 <div class="slideshow"> 6 <h1>文字が隠れてしまう</h1> 7 <img src="image/utiyu.jpg" width="100%" height="700px"> 8 <img src="image/yado.jpg" width="100%" height="700px"> 9 <img src="image/rotenburo5.jpg" width="100%" height="700px"> 10 <img src="image/syokuji.jpg" width="100%" height="700px"> 11 </div> 12 13 </header>
css
1@charset "utf-8"; 2 3body { 4} 5.wrapper{ 6} 7 8.slideshow { 9 position: relative; 10} 11header h1{ 12 position: absolute; 13 top: 50%; 14 left: 50%; 15} 16 17.slideshow img{ 18 display: none; 19 position: absolute; /*------スライドショーで画像を重ねるため-----*/ 20}
jQuery
1 $(function(){ 2 $('.slideshow').each(function(){ 3 var $slides = $(this).find('img'), 4 slideCount = $slides.length, 5 currentIndex = 0; 6 7 $slides.eq(currentIndex).fadeIn(); 8 setInterval(showNextSlide,5000); 9 10 function showNextSlide(){ 11 var nextIndex = (currentIndex + 1) % slideCount; 12 13 $slides.eq(currentIndex).fadeOut(); 14 $slides.eq(nextIndex).fadeIn(1000); 15 16 currentIndex = nextIndex; 17 } 18 }); 19 });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。