初めまして、宜しくお願いいたします。
今回、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で質問しましょう!
似たような質問が見つかりました
- 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ランキング
-
Slick.jsのオプションrtlについて
-
複数の要素へ appendchild でき...
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
Gifアニメ、最後のコマに行った...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
複数のバナーをリロードする度...
-
デフォルト非表示にしたい。【t...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
onmouseoverの表示切り替えが上...
-
window.openで値の渡し方を教え...
-
html スクロール要素を下から表...
-
javascriptで教えてください。 ...
-
「jQuery」アコーディオンメニ...
-
web制作(HP作成について教えて...
-
jQueryで、リンクURLの一致を確...
-
教えて下さい。ランダムにバナ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html5に変えるとスライドショー...
-
【iOS及びAndroid】リンク画像...
-
アコーディオンメニューが開い...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
[jQuery]bxSlider 一番最後と...
-
神経衰弱 順番に裏返し
-
チェックボックスと画像切替の連動
-
一定時間ごとに画像を切り替え...
-
複数の要素へ appendchild でき...
-
jqueryサブウィンドウにて画像...
-
Firefoxとクロームでフェードイ...
-
折り畳みメニューを使った場合...
-
fontsize.jsでhtmlの大中小の設...
-
jsでグリッドデザインのサムネ...
-
javascript 神経衰弱
おすすめ情報