ＩＥ6だけがスライドショー不具合
初めまして、宜しくお願いいたします。
今回、jquery.jcarousel.jsを用いて、幅を100％にしたスライドショーを作成いたしました。
画像は1-5のループです。
ie6は初回のループのみおかしい動きをいたします。
画像1～画像5までループしたら普通はまた画像1に移るのですが、その画像1が
非表示され空白になり画像2がきます。その後、ループは正常に動いております。
最初だけ画像1が空白って原因がわかりません。（画像で添付いたしております
）
いろいろ検索して修正してきましたが、さすがにjavascriptをie6対応に修正する手段が分からず、質問いたしました。
申し訳ありませんが、皆様方、宜しくお願いいたします。
headでのソース
<!-- スライドjs -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<!-- /スライドjs -->
ｈｔｍｌのソース
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
<li><img src="img/1.jpg" width="800" height="400" /></li>
<li><img src="img/2.jpg" width="800" height="400" /></li>
<li><img src="img/3.jpg" width="800" height="400" /></li>
<li><img src="img/4.jpg" width="800" height="400" /></li>
<li><img src="img/5.jpg" width="800" height="400" /></li>
</ul>
<div class="jcarousel-scroll">
<div class="jcarousel-scroll_left"><a href="#" id="mycarousel-prev">« Prev</a></div>
<div class="jcarousel-scroll_right"><a href="#" id="mycarousel-next">Next »</a></div>
<div class="clear"></div>
</div>
<!-- /.jcarousel-scroll -->
<div class="control_area">
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<div class="clear"></div>
</div>
<!-- /.jcarousel-control -->
</div>
<div class="clear"></div>
</div>
<!-- /.jcarousel-skin-tango -->
jquery.jcarousel.jsのソース（一部）
next: function() {
if (this.tail !== null && !this.inTail) {
this.scrollTail(false);
} else {
this.scroll(((this.options.wrap == 'both' || this.options.wrap == 'last') && this.options.size !== null && this.last == this.options.size) ? 1 : this.first + this.options.scroll);
}
},
prev: function() {
if (this.tail !== null && this.inTail) {
this.scrollTail(true);
} else {
this.scroll(((this.options.wrap == 'both' || this.options.wrap == 'first') && this.options.size !== null && this.first == 1) ? this.options.size : this.first - this.options.scroll);
}
},
scrollTail: function(b) {
if (this.locked || this.animating || !this.tail) {
return;
}
this.pauseAuto();
var pos = $jc.intval(this.list.css(this.lt));
pos = !b ? pos - this.tail : pos + this.tail;
this.inTail = !b;
// Save for callbacks
this.prevFirst = this.first;
this.prevLast = this.last;
this.animate(pos);
},
scroll: function(i, a) {
if (this.locked || this.animating) {
return;
}
this.pauseAuto();
this.animate(this.pos(i), a);
},
pos: function(i, fv) {
var pos = $jc.intval(this.list.css(this.lt));
if (this.locked || this.animating) {
return pos;
}
if (this.options.wrap != 'circular') {
i = i < 1 ? 1 : (this.options.size && i > this.options.size ? this.options.size : i);
}
jquery.jcarousel.jsはオープンソースなので、検索していただけると、
手に入るソースですので、宜しければ、確認いただけると幸いです。
本当に素人なもので、申し訳ありませんが、宜しくお願いいたします。
お礼
ご回答ありがとうございます！ 先ほど、トップページに「文章」の新項目追加を行い、HTML編集でスクリプトを移植したところ、無事トップページだけで動きました。ひとつのページだけで表示したければ、そのコンテンツ部分を触ればいいということがわかりました。 お時間いただき恐縮です。ありがとうございました。