これは多くの背景で説明するのが難しいので、非常に長い質問で申し訳ありません. また、私はまだ学習中なので、より良い開発者になるのに役立つ建設的なフィードバックをいただければ幸いです。
すべての画像を非表示にするマスクを持つ jQuery 画像スライダーを使用し、クリック機能を使用して画像を X # ピクセル左または右に移動させ、マスク内の次の画像を表示します。ピクセル数は、jQuery で ul 要素に適用されたインライン スタイルで定義され、クリックするたびに変化します。スライダーは、css 値がすべての画像の幅の合計に等しいことを要求し、スライダーはそれに基づいてスライドする距離を計算します。
私の場合、幅は 980px です。したがって、右クリックすると、ul に「style: left: -980px」が追加されます。次のものでは、「style=-1960px」などです。
実際に表示されたスライドの数を把握するために、その ul 要素に適用される style: left の値に基づいて、[前へ] ボタンと [次へ] ボタンの onclick 属性を変更する jQuery を作成したいと思います。これを行うコードをいくつか書きましたが、期待どおりに機能しません.cssの実際の値ではなく、要素が前方にスライドしているピクセル数に基づいてonclick属性を変更しているようです.
私は何を間違っていますか？私の最終的な目標は、最初の画像が表示されているときに、前のボタンにスライド 9 の値が必要であり、次のボタンにスライド 2 の値が必要であることです。次のスライドでは、スライド 1 とスライド 3 に変更されます。の上。
これはスライダーに付随するために私が書いた機能ですが、他にもたくさんあるのでフィドルを見てください。SO は、フィドルへのリンクにコードを添付する必要があります。
$j("#next, #prev").click(function() {
var slideNumber = $j('ul.imgHolder').get(0).style.left;
if (slideNumber == '0px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
}
else if (slideNumber == '-980px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 2']);");
}
else if (slideNumber == '-1960px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
}
else if (slideNumber == '-2940px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
}
else if (slideNumber == '-3920px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
}
else if (slideNumber == '-4900px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
}
else if (slideNumber == '-5880px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 9']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
}
else if (slideNumber == '-6860px'){
$j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
$j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
}
});