![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
初めまして、宜しくお願いいたします。
今回、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 -->
htmlのソース
<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はオープンソースなので、検索していただけると、
手に入るソースですので、宜しければ、確認いただけると幸いです。
本当に素人なもので、申し訳ありませんが、宜しくお願いいたします。
![「IE6だけがスライドショー不具合」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/a/27158497_5497badd3b8fa/M.jpg)
No.1ベストアンサー
- 回答日時:
配布サイトのサンプル(16種類)をIE6で試してみましたが、私の環境では問題は出ないようです。
それなので、スクリプトは対応しているのではないかと思われます。
(Special Examplesの最初のものだけはうまく動作しませんが、これはfxでも同じでしたので、ソースにどこかおかしなところがあるのではないかと…)
もし、質問者様の環境でも配布元のサンプルが動作するようであれば、設定の方法にどこかおかしなところがあるのでは?
たとえば、CSSでIE6が対応していない擬似クラスを使っているとかではありませんか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
jQueryのclickイベントハンドラ
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
エンドロールを枠の中で表示す...
-
Flickrのような綺麗なサムネイ...
-
キャラクターがぴょこんと飛び...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
-
jQueryでネスト構造の<li>がク...
-
1枚の画像をクリックすると複数...
-
401エラードキュメントを401.ht...
-
変数名をどのようにつけるのが...
-
HTML id名とjavascript変数名
-
ディレクトリ内画像表示
-
【javascript で動的に a タグ...
-
オンマウスで、画像切り替え+...
-
IplImageをPictureBoxへ表示が...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報