Question

我正在尝试为我的wordpress页面创建一个包含作业列表的新菜单，例如本页面上的那个：http://www.resume.se/，其中显示 Senaste jobben （抱歉它是用瑞典语，希望你得到我所指的菜单）。所以，我希望列表对象可见几秒钟，然后我希望菜单向左滑动，第一次列出第一个列表对象的宽度，第二个滑动第二个列表对象的宽度，等等上。

if ($('.container-menu-platsannonser').length > 0 ) {

    var slider = $('.menu-platsannonser').children('ul');
    speed = 4000;

    slider.each(function(){
        var $this = $(this);
        var li = $this.find('li');
        var no_of = li.length;
        var cur = 1;

        if (3 < no_of) {
            $this.slideShow = function() {
                ++cur;
                $this.animate({
                    'margin-left': '-='+100

                }, 600, 'swing', function(){
                    if (no_of == cur) {
                        $this.css('margin-left', '0');
                        cur = 1;
                    }
                    setTimeout($this.slideShow, speed);
                })
            }
            setTimeout($this.slideShow, speed);
        }
    })


}

我已设法将幻灯片设置为100像素，但如何让每个列表项的动画宽度更改？此外，现在我有四个菜单项，使用wordpress创建。此代码使列表项滑动两次半，然后从头开始。我想菜单无缝循环。请耐心等待，因为我有点吮吸javascript。如果我不清楚，或者您需要其他信息，请告诉我。所以，总结一下。我想做的是：

- 向左滑动菜单，列表对象的宽度

- 不断循环

感谢我能得到的任何帮助！

Answer 1

要获得列表项的宽度，我认为你可以使用：

$("li:fist").outerWidth(true);

为了让循环永远循环，我会等待动画完成并将li移动到列表的末尾。

var $li = $("li:first");
$li.parent().append($li);

使用javascript滑动菜单

1 个答案: