jqueryでふんわり画像がフェードイン・フェードアウトで切り替わる処理をつけ、レスポンシブデザインにしたくてページの幅変えたら大きさ変わるように処理しました。
画像はうまくいったのですが、
その画像の下から色々文章を入れていきたいのですが表示されずどうやら画像の裏にいってしまっているようです。
どうしたら良いでしょうか?
HTML
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>サンプル作成</title> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 9 <link rel="stylesheet" type="text/css" href="style.css"> 10 <!---/*トップページのスライドショー---> 11 12 <script type="text/javascript"> 13 function slideSwitch() { 14 var $active = $('#slideshow img.active'); 15 16 if ( $active.length == 0 ) $active = $('#slideshow img:last'); 17 18 var $next = $active.next().length ? $active.next() 19 : $('#slideshow img:first'); 20 21 $active.addClass('last-active'); 22 23 $next.css({opacity: 0.0}) 24 .addClass('active') 25 .animate({opacity: 1.0}, 1000, function() { 26 $active.removeClass('active last-active'); 27 }); 28 } 29 30 $(function() { 31 setInterval( "slideSwitch()", 4000 ); 32 }); 33 </script> 34 35 </head> 36 37 <body> 38 39 <div id="slideshow"> 40 <img src="image/1.jpg" alt="画像1" class="active"> 41 <img src="image/2.jpg" alt="画像2"> 42 <img src="image/3.jpg" alt="画像3"> 43 </div> 44 45 46 <div id="main" class="container"> 47 48 <div id="posts" > 49 <div class="post"> 50 <div class="post-header"> 51 52 <div class="post-mata"> 53 20130403 カテゴリ 54 </div> 55 </div> 56 <div class="post-content"> 57 <div class="post-image"> 58 <img src="image/noimage.png" width="100" height="100"> 59 </div> 60 <div class="post-body"> 61 <p> 62 本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。本文。 63 </p> 64 </div> 65 </div> 66 </div> 67 68〜〜〜省略〜〜〜 69 70</body>
css
1/*トップページのスライドショー 2---------------------------------------------------------------------------*/ 3#slideshow { 4 position: relative; 5 width: 100%; /* 画像の横幅に合わせて記述 */ 6 height: 100%; /* 画像の高さに合わせて記述 */ 7 8} 9#slideshow img { 10 position: absolute; 11 top: 0; 12 left:0; 13 z-index: 8; 14 opacity: 0.0; 15 width: 100%; /* 画像の横幅に合わせて記述 */ 16 height: auto; /* 画像の高さに合わせて記述 */ 17} 18#slideshow img.active { 19 z-index: 10; 20 opacity: 1.0; 21} 22#slideshow img.last-active { 23 z-index: 9; 24} 25/*トップページのスライドショー 26---------------------------------------------------------------------------*/ 27 28body { 29 font-size: 14px; 30 font-family: Arial, Verdana; 31} 32 33a { 34 text-decoration: none; 35} 36 37p { 38 padding-bottom: 14px; 39 margin: 0; 40 line-height: 1.8; 41}
jqueryは今日から開始したので知識は全然ありません。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/22 13:29 編集