0

400% 幅の #slider という名前の div があり、overflow-x が非表示に設定されています。#slider DIV は 25% の 4 つの div で埋められます (各 div が DOM の 100% に広がるように)。ページが読み込まれたら、すぐに div を左に -100% 移動して、div がページの読み込みから左右に移動できるようにします。

#slider DIV をアニメーション化し、左右に動かして各子 DIV を DOM のビューに移動します。単純な方法を使用します。

$(".goright").click(function(){
$("#slider").animate({left:'-=100%'}, 400);
});

と

 $(".goleft").click(function(){
 $("#slider").animate({left:'+=100%'}, 400);
 });

それぞれ。

これは見事に機能します。

ただし、#slider の位置が <= -300% または >= 0% に達すると、スライダーを動かすボタンをフェードアウトしようとしています。隠れている場合は、もう一方をフェード インします。

ページが最初に読み込まれると、次のコードが機能するように見えます。

// Make the right slide work
$(".goright").click(function(){
    if ($('.goleft').is (':hidden')) {
        $('.goleft').fadeIn();
    };
    $("#slider").animate({left:'-=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');
         if (leftPos >= '-300%') {
              $('.goright').fadeOut(200);}
        });

    });

// Make the left slide work
$(".goleft").click(function(){
    if ($('.goright').is (':hidden')) {
        $('.goright').fadeIn();
    };
    $("#slider").animate({left:'+=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');

         if (leftPos >= '0%') {
              $('.goleft').fadeOut(200);}
        });

    });

しかし、レンダリング後にページのサイズを変更すると、右のコントロール ボタンが正しい左の値でフェードアウトできず、フェードアウトが早すぎるようです。

何がうまくいかないのですか？どんな助けでも大歓迎です！

ここでウェブサイトを見ることができます: http://www.newactorscompany.com/new/indexx.html

4

1 に答える 1

0

フレームに基づいて矢印を表示/非表示にする別の方法を使用します。最初のフレームを表示する場合は、左矢印を非表示にします。最後のフレームを表示する場合は、右矢印を非表示にします。単純なフレーム カウンターによる。パーセントを使用しても、ウィンドウのサイズを変更すると位置が変化するように見えるためです。

于 2013-03-23T10:40:09.237 に答える