1

jQueryを使用してスライドショーを作成しました。これは、fadeIn および fadeOut メソッドを使用します。これはうまくいきます。

助けが必要なのは、表示されるスライドに応じて、css クラスを別の div に追加することです。JSfiddle に短縮されたコードをいくつか追加したので、私の言いたいことをよりよく理解できます。

http://jsfiddle.net/dRqKM/

対応するスライドが表示されたときに、ピンクのボックスが強調表示されるようにします。

以下を追加すると、うまくいかないようです：

if ($("#firstSlide").css("display") == "block") {
    $("#div1").addClass("Highlight");
    $("#div2").removeClass("Highlight");
    $("#div3").removeClass("Highlight");
}
4

5 に答える 5

0

3 つの主要な問題:

  1. の特異性は.Highlightis と同じであり、CSS 定義で最初に来る.buttonため、 の bg 色が勝ち、ピンクを維持しています。より高い特異性またはより高い重要性を与える (例:またはまたは を使用).Highlight.buttondiv.Highlight.button.Highlight!important
  2. 次/前のボタンをクリックすると、コードは回転を考慮しません。緑色に変わったものは、回転させていないので緑色のままです。
  3. チェックするコード (if/else if/else if ブロック) が間違っていました。問題ないようにif見えましたが、他の 2 つの条件ブロックが間違っていました。これは単なるデモのタイプミスだと思います。しかし、私は私の例でそれを修正しました。

http://jsfiddle.net/dRqKM/1/ 動作するバージョンについては、このフィドルを参照してください。フェードが終了する前にボックスを回転させたい場合は、呼び出しをコールバック関数内ではなく、呼び出しの後に移動するだけです。例changeActiveChild: http://jsfiddle.net/dRqKM/6/fadeIn

于 2013-02-22T21:44:59.477 に答える
0

ここで修正した論理的な問題がいくつかありました。

http://jsfiddle.net/dRqKM/7/

それ以外の最大の問題は、.Highlightクラスがクラスの前に宣言されたbuttonため、両方を追加してもbuttonクラスが優先されることでした。そのため、ロジックが正しかったとしても、正しく機能していませんでした。.Highlightクラスをクラスの下に移動し、buttonいくつかのロジックを修正しました。これで準備完了です。

于 2013-02-22T21:51:42.063 に答える
0

あなたが持っている if ステートメントは、ページの準備ができたときに一度だけ実行されますが、クリックしたときにそれらを起動したいと思うでしょう。また、ハイライト クラスには、.button クラスの背景スタイルをオーバーライドするのに十分な特異性がありません。スタイルシートでこれを考慮してください：

div.Highlight { background:green; }

ノードをスタイル ルールに追加すると、ボタン クラスの背景がオーバーライドされます。

于 2013-02-22T21:39:50.890 に答える
-1

すべてのボタンからクラスを削除してから、適切なボタンに追加し直します。

$('.buttons').removeClass('Highlight');
targetButton.addClass('Highlight');

また、あなたのHighlightクラスは、クラスをオーバーライドするほど具体的ではありませんでしたbutton。注意すべきもう 1 つの点は、意図した場合は注意してbackground-color: green;くださいbackground。CSS プロパティがショートカットとして使用され、background構文が異なります。色のみを指定する場合は、通常、前者の方法が優先されます。

ここに作業バージョンがあります：

 $(document).ready(function () {
     $('.slideshow').find('> li:eq(0)').nex\All().css({ 'opacity': '0', 'display': 'none' });
     $('.controls > a').click(function (event) {
        event.preventDefault();
        var currentslide = $(this).parents('li:first');

        var currentposition = $('.slideshow li').index(currentslide);
        var nextposition = ($(this).attr('class') == 'next') ? currentposition + 1 : currentposition - 1;

        $('.buttons').removeClass('Highlight');
        $('#div'+(nextposition+1)).addClass('Highlight')

        $('.slideshow li:eq(' + currentposition + ')').hide() 
        $('.slideshow li:eq(' + nextposition + ')').fadeIn(2000);
    });
});

JSFiddle: http://jsfiddle.net/dRqKM/8/

ドキュメンテーション

于 2013-02-22T21:38:22.417 に答える
-1

ここであなたは仲間です：http://jsfiddle.net/zFnfC/

js で 2 行、css で 1 行

$("div.buttons").removeClass('Highlight');
$("#div" + (nextposition + 1)).addClass('Highlight');

そしてCSS：

.Highlight { background: green !important; }
于 2013-02-22T21:45:29.717 に答える