JQuery初心者です
同一ページ内にサムネイル付ギャラリーを複数作り、
ギャラリーごとに横にスクロールする形で作っています。
今の状態ですと、1ページ目は正常動作で問題はありません。
ただ、1ページ目のJQuery処理前に<a href="#pege2">ページ2へ</a>で2ページ目にスクロールすると、2ページ目のメイン画像抜けてしまいます。
恐らく、前ページでのJQueryの処理が終了してないからだと思います。しばらくすると
前ページの処理が終了し2ページ目のメイン画像に反映されます。
これをどうにか<section id="pege●">ごと、もしくは<a href="#pege●">ページ●へ</a>をクリックしたらJQueryが実行する事が出来ないでしょうか?
色々調べてみましたが、出来ませんでした。
ご享受の程、宜しくお願いいたします。
参照ページ(http://www.tam-tam.co.jp/tipsnote/javascript/pos …)
html(こんな感じで作ってます)
<article>
<section id="pege1">
<section id="view"><!-- メイン画像-->
<p><img src="images/big_a01.jpg" width="" height="" alt="" /></p>
<p><img src="images/big_a02.jpg" width="" height="" alt="" /></p>
</section>
<ul id="thumbBtn"><!-- サムネイル画像-->
<li><img src="s_a01.jpg" width="" height="" alt="" /></li>
<li><img src="s_a02.jpg" width="" height="" alt="" /></li>
</ul>
<div id="details"><!-- 説明-->
<h2>説明文</h2>
<p><a href="#pege2">ページ2へ</a></p>
</div>
</section></section>
<section id="pege2">
<section id="view"><!-- メイン画像-->
<p><img src="images/big_b01.jpg" width="" height="" alt="" /></p>
・以下同じ
<p><a href="#pege3">ページ3へ</a></p>
</section></section>
<section id="pege3">
・以下同じ
</section></section>
</section>
</article>
JQueryの記述は次の通りです。
<script type="text/javascript">
$(function (){
//設定
var active="active",interval=5000;
var index=0, timerId=null;
var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");
tabs.each(function(){$(this).removeClass(active);});
content.hide();
cap.hide();
tabs.eq(0).addClass(active);
content.eq(0).fadeIn(0);
cap.eq(0).fadeIn(0);
//クリックされたらactiveというクラスを付与、
//切り替え、タイマーをリセット
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
return false;
});
//タイマー
setTimer();
function setTimer(){
timerId=setTimeout(timeProcess,interval);
return false;
}
function timeProcess(){
change((index+1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}
//切り替え
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
//fadeout
setTimeout(function(){
content.eq(index).stop(true, true).fadeOut(0),
cap.eq(index).stop(true, true).hide()
;}, 0);
//fadein
setTimeout(function(){
index=t_index;
content.eq(index).fadeIn(0),
cap.eq(index).fadeIn(0)
;}, 0)
}
});
</script>
No.2ベストアンサー
- 回答日時:
>id名をそれぞれ変えて設定してみます。
id指定でなく、class指定にすればよいのではないですか?。
class指定であれば、同一ページ内の複数箇所で指定可能です。
何回もお返事頂いてありがとうございます。
clssにする事は既に試してみましたが、駄目でした。
先程、IDをそれぞれ設定し、同じjQueryのjsを複数用意してそれぞれに記述してみたところ、
それぞれ正常に動きました。
とりえず望み通りの動作になりましが、
もっとスマートなやり方があればご指摘頂きたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
javascript 神経衰弱
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
【CSS】floatで左右に並べた...
-
Gifアニメ、最後のコマに行った...
-
クリックして変更した画像を他...
-
文字と数字が混在する要素のsor...
-
マウスを乗せるとメニュー表示
-
[急ぎ] videoタグで埋め込んだm...
-
画像ランダム表示、しかしダブ...
-
JavaScriptでサイコロのような...
-
Excel VBA マクロ 画像(...
-
ホームページビルダー15 メニュ...
-
divのheight指定で画面一杯に表...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報