初めまして、宜しくお願いいたします。
今回、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はオープンソースなので、検索していただけると、
手に入るソースですので、宜しければ、確認いただけると幸いです。
本当に素人なもので、申し訳ありませんが、宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
配布サイトのサンプル(16種類)をIE6で試してみましたが、私の環境では問題は出ないようです。
それなので、スクリプトは対応しているのではないかと思われます。
(Special Examplesの最初のものだけはうまく動作しませんが、これはfxでも同じでしたので、ソースにどこかおかしなところがあるのではないかと…)
もし、質問者様の環境でも配布元のサンプルが動作するようであれば、設定の方法にどこかおかしなところがあるのでは?
たとえば、CSSでIE6が対応していない擬似クラスを使っているとかではありませんか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
横並びの画像を3枚時間差でフェ...
-
VideoBoxのカスタマイズ
-
「jQuery」アコーディオンメニ...
-
画像が表示でnull; this.src
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
HPで写真をクリックすると次の...
-
jQueryを使ってランダムに表示
-
iframe内のリンクが飛ばないの...
-
JAVAスクリプトについて
-
MFCで画像を表示させているので...
-
フッター上部に謎の隙間
-
jquery 3の倍数のliだけ色を変える
-
画像とコメントの同時表示をし...
-
dtで横並び
-
画像をクリックしたら別ウイン...
-
指定位置に要素を追加する
-
背景色を透明化
-
htmlの記述で link rel=styles...
-
スムーズスクロールとfleXcroll...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報