-
ID:Rk7D3r さんの質問

headerにbxsliderを使って7枚の写真をフェードインさせるようにしたいと思います。(メイン画像の下にサムネイルを設置し、自動で表示されるようにしています。)作成中に確認した際には問題なく表示されていたのですが、いざアップロードしてブラウザチェックすると、サムネイルと写真の下部分のごく一部のみが表示されていて、上にずれたような状態になってしまいます。リンクさせている他のページからこのページへ戻ると問題なく表示されるのですが、ページの再読込みをするとまた上記のようなおかしな現象が起きてしまいます。何が問題なのか全くわからず、どなた様かお知恵をお貸し頂けませんでしょうか。宜しくお願い致します!

みんなの回答 2 件

ID:Rk7D3r さんの回答

上記が使用しているコードです。宜しくお願い致します。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type='text/javascript' src='js/jquery.bxSlider.js'></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"> 
</script> 
<script type="text/javascript"> 
  $(document).ready(function(){ 
    $('#slider').bxSlider(); 
  }); 
</script> 
<script type="text/javascript"> 
  
$(function(){ 
  // assign the slider to a variable 
  var slider = $('#slider2').bxSlider({ 
        auto: true, 
        pause:    5000, 
        speed: 5500, 
        mode: 'fade', 
        prevText: '<', 
        nextText: '>', 
        pager: true, 
        easing: 'easeInExpo', //イージングの効果 
         //サムネイルの設定 
        buildPager: function(slideIndex){ 
      switch (slideIndex){ 
        case 0: 
          return '<a href="index.html" class="thumb"><img src="images/img1.jpg" width="80" height="32" /></a>'; 
        case 1: 
          return '<a href="sample1.html" class="thumb"><img src="images/img8.jpg" width="80" height="32" /></a>'; 
        case 2: 
          return '<a href="sample2.html" class="thumb"><img src="images/img5.jpg" width="80" height="32" /></a>'; 
        case 3: 
          return '<a href="sample3.html" class="thumb"><img src="images/img6.jpg" width="80" height="32" /></a>'; 
  case 4: 
          return '<a href="sample4.html" class="thumb"><img src="images/img4.jpg" width="80" height="32" /></a>'; 
  case 5: 
          return '<a href="sample5.html" class="thumb"><img src="images/img3.jpg" width="80" height="32" /></a>'; 
  case 6: 
          return '<a href="sample6.html" class="thumb"><img src="images/img7.jpg" width="80" height="32" /></a>'; 
      } 
    } 
        }); 
}); 
</script> 
</head> 
 
<body>  
<ul id="slider2" class="slider"> 
<li class="slide1"><a href="index.html"><img src="images/img1.jpg" rel="images/img1_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide2"><a href="sample1.html"><img src="images/img8.jpg" rel="mages/img8_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide3"><a href="sample2.html"><img src="images/img5.jpg" rel="images/img5_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide4"><a href="sample3.html"><img src="images/img6.jpg" rel="images/img6_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide5"><a href="sample4.html"><img src="images/img4.jpg" rel="images/img4_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide6"><a href="sample5.html"><img src="images/img3.jpg" rel="images/img3_thumb.jpg" alt="" title="" /></a></li> 
  <li class="slide7"><a href="sample6.html"><img src="images/img7.jpg" rel="images/img7_thumb.jpg" alt="" title="" /></a></li> 
</ul> 
 
<div id="sub"> 
<div id="globalnavi"> 
<ul> 
<li id="menu1"><a href="index.html" title="">テスト1</a></li> 
<li id="menu2"><a href="sample1.html" title="">テスト2</a></li> 
<li id="menu3"><a href="sample2.html" title="">テスト3</a></li> 
<li id="menu4"><a href="sample3.html" title="">テスト4</a></li> 
<li id="menu5"><a href="sample4.html" title="">テスト5</a></li> 
</ul> 
</div> 
</div>  
</body> 
</html> 
ID:/NSJn4 さんの回答

何が原因かは突き止めておりませんが、記述がおかしい箇所が散見されます。
下記ソースで正常に表示されると思いますよ。見比べてみてください。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.bxslider.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $('#slider').bxSlider({ 
    auto: true, 
    pause: 5000, 
    speed: 500, 
 mode: 'fade', 
    prevText: '<', 
    nextText: '>', 
 pager: true, 
    easing: 'easeInOutQuint', 
 buildPager: function(slideIndex){ 
    switch(slideIndex){ 
        case 0: 
          return '<img src="images/img1.jpg" alt="" width="80" height="32" />'; 
        case 1: 
          return '<img src="images/img2.jpg" alt="" width="80" height="32" />'; 
        case 2: 
          return '<img src="images/img3.jpg" alt="" width="80" height="32" />'; 
      } 
  } 
  }); 
}); 
</script> 
</head> 
 
<body> 
<ul id="slider" class="slider"> 
  <li><a href="index.html"><img src="images/img1.jpg" alt="" title="" /></a></li> 
  <li><a href="sample1.html"><img src="images/img2.jpg" alt="" title="" /></a></li> 
  <li><a href="sample2.html"><img src="images/img3.jpg" alt="" title="" /></a></li> 
</ul> 
 
<div id="sub"> 
<div id="globalnavi"> 
<ul> 
<li id="menu1"><a href="index.html" title="">テスト1</a></li> 
<li id="menu2"><a href="sample1.html" title="">テスト2</a></li> 
<li id="menu3"><a href="sample2.html" title="">テスト3</a></li> 
<li id="menu4"><a href="sample3.html" title="">テスト4</a></li> 
<li id="menu5"><a href="sample4.html" title="">テスト5</a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>
ID:xpMrQl

コメント頂きまして、ありがとうございます!教えて頂いたようにコードを修正したのですが、やはり問題が解決されません。fadeはしているようなのですが、再読込みボタンを押すとずっと上の方へズレてしまい、その上の方でフェイドしているのが少し確認できました。ちなみにこのコードは、下記サイトを参考にさせて頂きました。

sterfield.co.jp/designer/コンテンツスライダー、カルーセルスライダーに.html

ID:xpMrQl

教えて頂いたコードに沿って、もう一度最初から作り直してみました。bxsliderは問題なくなったのですが、他のfloatさせていたdiv要素が問題だったようです。ご丁寧にお教え頂き、本当に感謝致します!ありがとうございました!!

最終更新日:2012-12-27 (7,336 views)

関連するトピックス

ページ上部に戻る