- ベストアンサー
画像スライダーの構造を勉強している中で、display:blockの理由が分からない
- 画像スライダーの構造を勉強している中で、display:blockの理由が分からない
- 質問者は見よう見まねで画像スライダーを作成したが、display:blockの理由が分からないので勉強中
- 質問文章の中で、display:blockの理由が分からないという疑問を持っている
- yonbakukan
- お礼率7% (11/148)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
多分、もう終わってるんだろうけれど閉じていないみたいなので… ＞～の部分をもっと簡略化できないでしょうか？ 不要と思われるものを省いて、少し短くしてみました。 ＣＳＳは記載がないので適当に設定しています。 （違う方法も考えられるけれど、ご提示のままにしてあります） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <style type="text/css"> #s1 ul, #s1 li{ list-style-type:none; } #s1 ul{ position:relative; } #s1 li{ position:absolute; top:0; } #s1 li img{ width:300px; height:300px; } </style> <script type="text/javascript"> $(function(){ var ul = $("#s1>ul"), first = ">li:first-child"; $(">li", ul).hide().eq(0).fadeIn(3500); setInterval(function(){ $(first, ul).appendTo(ul).fadeOut(1500); $(first, ul).fadeIn(1500); }, 5000); }); </script> </head> <body> <div id="s1"> <ul> <li><img src="A.jpg" alt=""></li> <li><img src="B.jpg" alt=""></li> <li><img src="C.jpg" alt=""></li> </ul> </div> </body> </html>
その他の回答 (2)
- tracer
- ベストアンサー率41% (255/621)
cssの設定部分なので、cssがないとなんとも言えません。 通常のliのブラウザデフォルトの挙動はブロック要素ですが、css側で何かしらの変更が加えられている可能性をなくすために、念の為、「display:block」を指定しているのではないかと想像します。試しに、display:blockの箇所を削除して確認すれば分かりやすいと思います。おそらく何の変化もないと思います。万が一、displayにtableやinlineなどが設定されていると都合が悪いので、そのための保険だと思います。 話はそれますが、おそらく何かしらのサンプルを参考に作られたのではないかと思いますが、javascript側でcssを指定するのはバッドノウハウとされます。javascript側でのcss記述が増えてしまうと、どこで何が指定されて、どれが優先して設定されているのかが管理が難しくなり、ほとんどの場合、見た目はcssファイルで設定したほうが管理が楽になります。たとえば、以下の様な感じです。 CSS .slideImg{ display : block; opacity : 0; z-index : 1 } JavaScript mod3.addClass("slideImg"); ちなみのちなみに、javascript学習の腰を折るような話ですが、例のようなスライドショーは、今やcssだけでできます。
補足
ようやく覚えつつあるんですが、 ＞mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); の部分をもっと簡略化できないでしょうか？ また意味が解読できてないのです。 1..stop()はzIndexは画像の順番だと思います。それをなぜストップしているのかがわかりません。 2.そこから下は日本語で文章にすると自分の解釈は 一番上の画像を1.5秒でけして、下の画像を上にもってきて、それが終わったら画像を一番後ろにもっていく。 って具合でしょうか？
- SeydaNeen
- ベストアンサー率43% (26/60)
display:"block"の部分ですが、liタグのデフォルトのdisplay要素はlist-itemになっていて、これをblockに変えないと画像の前に・が出てしまうのでそれを避けている目的かと。 で、一応動かしてみました、が、想定の動きをしてないんじゃないかと。切替え時に下の方に画像が表示されてフェイドアウトしてます…。 これはposition要素がうまく指定されてないからでしょう。本当は重複表示させたいはずです。 どうにも気になったので、改造したものを参照URLに置いてますが、ソースを見てください。まあ参考程度に…。 （あと、iQuery関数を重ねすぎだと思います。）
補足
cssは省略してます 実は一箇所で画像がスライドするようにしてます
お礼
すいません。忘れてました。