jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。
http://jsdo.it/alicex/45Jv
実際に配置して、ブラウザチェックを行ったのですが、
(1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて
戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走
して、勝手に動いてしまいます。
(2)また、サムネイル上でカーソルを高速で通過させると、
させた分だけ記憶してメインイメージが変化してしまいます。
(1)のバグを無くしたいのと、(2)は、今カーソルを合わせている
サムネイルに対応したメインイメージにすぐ変化して欲しいです。
jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。
$(function() {
var thumb = $("#thumbnail");
var main = $("#main");
$("li:first-child",thumb).addClass("on").children("img").hide();
$("li:not(:first-child)",main).hide();
slider();
$("li",thumb).hover(function() {
$("li",thumb).removeClass("on").children("img").show();
$(this).addClass("on").children("img").hide();
num = $(this).index() + 1;
mainSelector = $("li:nth-child(" + num + ")",main);
mainSelector.fadeIn();
$("li",main).not(mainSelector).fadeOut();
});
});
function slider() {
$("#thumbnail li img").show();
$("#thumbnail li.on img").hide();
c = $("#thumbnail li.on").index() + 1;
c2 = $("#thumbnail li.on").index() + 2;
mainSelector = $("#main li:nth-child(" + c + ")");
$(mainSelector).fadeIn();
$("#main li").not($(mainSelector)).fadeOut();
$("#thumbnail li").removeClass("on");
if (c2 == 6) {
$("#thumbnail li:nth-child(1)").addClass("on");
}else{
$("#thumbnail li:nth-child(" + c2 + ")").addClass("on");
}
timerID = setTimeout('slider()',3000);
}
本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。
何卒よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PostgreSQL 画像とカテゴリーを出力したいのですが、取得の条件を付ける方法がわかりません。 2 2022/05/01 18:03
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
jQueryで、リンクURLの一致を確...
-
jQueryで同じクラス名のものを...
-
フッター上部に謎の隙間
-
アップロードファイルの種類に...
-
HTMLで条件分岐はできますか?
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
Javascript初心者|jQueryの.va...
-
CSS <div>の入れ子が反映さ...
-
createElementで作成した要素を...
-
【javascript で動的に a タグ...
-
画面が真っ白になるのはどうして?
-
日替わりで画像を変更したい
-
背景色を透明化
-
ボタンを押すたびに交互に切り...
-
【短い】1つだけ展開/表示/非表...
-
jQueryでサーバー上のファイル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html5に変えるとスライドショー...
-
【iOS及びAndroid】リンク画像...
-
アコーディオンメニューが開い...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
[jQuery]bxSlider 一番最後と...
-
神経衰弱 順番に裏返し
-
チェックボックスと画像切替の連動
-
一定時間ごとに画像を切り替え...
-
複数の要素へ appendchild でき...
-
jqueryサブウィンドウにて画像...
-
Firefoxとクロームでフェードイ...
-
折り畳みメニューを使った場合...
-
fontsize.jsでhtmlの大中小の設...
-
jsでグリッドデザインのサムネ...
-
javascript 神経衰弱
おすすめ情報