どうか教えて下さい！
| 質問 > フロント機能 > topページのsuliderの追加の仕方 |
フロント機能
 |
| フラット表示 | 前のトピック | 次のトピック |
| 投稿者 | スレッド |
|---|---|
| sawada |
投稿日時: 2016/7/20 16:09
対応状況: −−−
|
半人前   登録日: 2016/7/19 居住地: 投稿: 19 |
Re: topページのsuliderの追加の仕方 「A Simple jQuery Slideshow」を利用し、ホームページのトップに画像の切り替えを付けようと試みました。
記述の仕方としては、 <head>のところに、head用のブロックを作り、 <style type="text/css"> #slideshow { position: relative; width: 360px; height: 300px; } #slideshow p { position: absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; margin: 0; background-color: white; /* ボックスの背景色(必須) */ height: 300px; } #slideshow p.active { z-index: 10; opacity: 1.0; } #slideshow p.last-active { z-index: 9; } #slideshow p img { width: 360px; height: 280px; display: block; border: 0; margin-bottom: 10px; /* 画像下部の余白 */ } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow p.active'); if ( $active.length == 0 ) $active = $('#slideshow p:last'); var $next = $active.next().length ? $active.next() : $('#slideshow p: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()", 5000 ); }); </script> 上記の様に入力しました。 そして、画像を表示させたいbodyの該当ブロックの中身が、 <div class="top-block1"> <p> <a href="リンク先"><img src="画像１" /><br /> コメント</a> </p> </div> <div id="slideshow"> <p class="active"> <a href="リンク先"><img src="スライドショーにしたい画像１" alt="画像"></a> キャプション1 </p> <p> <a href="リンク先"><img src="スライドショーにしたい画像２" alt="画像"></a> キャプション2 </p> </div> これで記載しましたが、縦に画像が並んでしまうだけで、スライドショーになりません。 また、上の画像１とスライドショーの画像を隣に並べて、スライドショーの画像だけを動かしたいと思います。 ここを訂正したらできるというのを教えていただいてもよろしいでしょうか？ また、これ以外にの方法でもっと簡単にできる方法があれば教えていただきたいです。 よろしくお願いいたします。 |
| フラット表示 | 前のトピック | 次のトピック |
| 題名 | 投稿者 | 日時 |
|---|---|---|
 topページのsuliderの追加の仕方 |
sawada | 2016/7/19 16:30 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/20 12:08 |
| » Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/20 16:09 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/20 19:27 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/21 15:53 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/21 16:00 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/21 17:13 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/21 17:34 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/21 18:06 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/21 19:40 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/22 12:10 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/25 11:11 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/7/26 11:57 |
| Re: topページのsuliderの追加の仕方 |
shhirose | 2016/7/26 13:35 |
| Re: topページのsuliderの追加の仕方 |
sawada | 2016/8/4 17:21 |
