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 回答