headerにbxsliderを使って7枚の写真をフェードインさせるようにしたいと思います。(メイン画像の下にサムネイルを設置し、自動で表示されるようにしています。)作成中に確認した際には問題なく表示されていたのですが、いざアップロードしてブラウザチェックすると、サムネイルと写真の下部分のごく一部のみが表示されていて、上にずれたような状態になってしまいます。リンクさせている他のページからこのページへ戻ると問題なく表示されるのですが、ページの再読込みをするとまた上記のようなおかしな現象が起きてしまいます。何が問題なのか全くわからず、どなた様かお知恵をお貸し頂けませんでしょうか。宜しくお願い致します！
みんなの回答 2 件
上記が使用しているコードです。宜しくお願い致します。
<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>
何が原因かは突き止めておりませんが、記述がおかしい箇所が散見されます。
下記ソースで正常に表示されると思いますよ。見比べてみてください。
<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>
関連するトピックス