Question

我的客户希望他们网站上的这个“赞助商”滑块可以滚动，随机化或淡入淡出。我尝试过不同的事情让所有这些都发生，但没有任何作用。此时滑块由设置为“.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;
    });

}

Answer 1

看起来您可能修改了预制的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无关;我在这里引用它们是因为它们的例子是直接的。

什么阻止这个动画自动？

1 个答案: