1

私のクライアントは、サイトのこの「スポンサー」スライダーをスクロール、ランダム化、またはフェードインおよびフェードアウトすることを望んでいます。これらすべてを実現するためにさまざまなことを試しましたが、何も機能しません。現在、スライダーは「.click」コマンドに設定されたボタンによって制御されています。Javascript でアニメーションを追加する方法はありますか?これを実現するには何を変更する必要がありますか? アニメーションでない場合、Javascript を使用してページの読み込み時に配列をランダム化する方法はありますか? さまざまな変更を入力しようとし続けていますが、何も機能していません。それらを機能させるには、「他のものをオフにする」必要があるのではないかと思います...

私はJavascriptが初めてなので、助けていただければ幸いです。

コードは次のとおりです。

// ============
// = SPONSORS =
// ============

if($('#sponsors').length>0){

    // let's make sure our logos are centered
    $(window).load(function(){
        $('#sponsor-logos li').each(function(){
            wrapper = $(this).find('span.logo');
            wrapper_height = wrapper.height();
            sponsor_logo = $(this).find('img');
            total_height = 84;
            logo_height = sponsor_logo.height();
            buffer = Math.floor(((total_height - logo_height) / 2));
            wrapper.css('paddingTop',buffer + 'px').height(wrapper_height-buffer);
        });
    });

    window_width = 656;
    slide_duration = 500;


    // get our arrows on there
    $('#sponsors .inner').prepend('<a class="prev" href="#">Prev</a>').append('<a class="next" href="#">Next</a>');

    // set our width
    thumbs = $('#sponsor-logos');
    thumbs.width(thumbs.children().length*164);
    thumbs.wrap('<div class="slider"></div>');




    // hook the arrows
    $('#sponsors  a.prev').click(function(){
        thumbs = $('#sponsor-logos');
        if((Math.abs(parseInt(thumbs.css('left').replace('px',''),10)))>1){
            if(!thumbs.data('animating')){
                thumbs.data('animating',true);
                thumbs.animate(
                        {left:'+='+window_width+'px'},
                        slide_duration, 'swing', function(){
                            thumbs.data('animating',false);
                        }
                    );
            }
        }else{
            // already too far, we'll bounce for feedback
            if(!thumbs.data('animating')){
                thumbs.data('animating',true);
                thumbs.animate(
                        {left:'+=15px'},
                        (slide_duration/5), 'swing', function(){
                            thumbs.animate(
                                    {left:'-=15px'},
                                    (slide_duration/5), 'swing', function(){
                                        thumbs.data('animating',false);
                                    }
                                );
                        }
                    );
            }
        }
        return false;
    });

    $('#sponsors a.next').click(function(){
        thumbs = $('#sponsor-logos');
        if(thumbs.width() - window_width - Math.abs(parseInt(thumbs.css('left').replace('px',''),10)) > 150){ // 150 represents at least one thumb (194 to be exact)
            if(!thumbs.data('animating')){
                thumbs.data('animating',true);
                thumbs.animate(
                        {left:'-='+window_width+'px'},
                        slide_duration, 'swing', function(){
                            thumbs.data('animating',false);
                        }
                    );
            }
        }else{
            // already too far, we'll bounce for feedback
            if(!thumbs.data('animating')){
                thumbs.data('animating',true);
                thumbs.animate(
                        {left:'-=15px'},
                        (slide_duration/5), 'swing', function(){
                            thumbs.animate(
                                    {left:'+=15px'},
                                    (slide_duration/5), 'swing', function(){
                                        thumbs.data('animating',false);
                                    }
                                );
                        }
                    );
            }
        }
        return false;
    });

}
4

1 に答える 1

0

既製のjquery画像スライダーのスクリプトを変更したようです。その場合は、おそらくこれについて難しい方法で進んでいます。通常、提供されたスクリプトをヘッダーに含めてから、html ファイルで、次のように DOM 内の要素をポイントします。

$("#galleryContainerElement").imgSlider({ object:of, slider:preferences });

特定のスライダーに問題がある場合は、そのスライダーをお知らせください。

まだ使用していない場合は、Orbitのようなスライダーを使用することをお勧めします(現在、Zurb のFoundationフレームワークの一部ですが、個別にダウンロードできます)。あるいは、jQuery に基づいて構築された多数のスライダーがあり、jQuery に少しでも慣れていれば、ほとんどのスライダーは簡単に構成できます。

車輪を再発明したい場合は、jQuery にanimate()関数があります (提供したコードで数回使用されています)。onload / document.ready をトリガーするsetTimeout()またはsetInterval()関数のいずれかを使用する必要があり、関数で宣言され$('#sponsors a.prev').click()、$('#sponsors a.next').click()それらをリサイクルできるように移動する必要があります。非常に多くのスライダーが既に存在することを考えると、独自のスライダーを作成するのは少し面倒です。

補足: w3schools は決して W3C と提携していないことに注意してください。それらの例は単純なので、ここでそれらを参照します。

于 2012-12-20T07:27:04.773 に答える