0

我正在尝试编写一个无限滑块，但由于某种原因，滑块只会从列表中获取第一个项目，然后永远不会用下一个“第一个”项目重新设置 firstli 变量。我不明白为什么，有人可以告诉我我做错了什么吗？

这是我的代码：

var o = this;

o.brandSlider = function() {
    o.container = $('.brand-slider');
    o.containerW = null;
    o.ul = o.container.find('ul');
    o.li = o.ul.find('li').each(
        function() {
            var w = $(this).outerWidth(true);
            o.containerW = o.containerW + w;
        })

    o.ul.css({
        width : o.containerW+'px'
    })

    o.li.each(function(){
        o.currentPos = $(this).position();
        $(this).css('left', o.currentPos.left+'px');
    }).css('position', 'absolute');

    o.slideTimer = setInterval(function(){
        o.firstli = o.li.first().addClass('target');
        o.lastli = o.li.last();
        o.newPos = o.lastli.position().left - 80 + o.firstli.outerWidth(true);
        o.li.css('left', '-=1px')
        if (o.li.css('left') == '-250px') {
            o.firstli.appendTo(o.ul).css('left', o.newPos+'px').removeClass('target');
        }
    }, 1)
};

// This should always be the last method. Use this to control the object.
o.init = function() {
    o.brandSlider();
};

这是加价

<section>
            <h1>Brands I've worked with</h1>
            <div class="brand-slider">
                <ul>
                    <li class="logos-1">Item</li>
                    <li class="logos-2">Item</li>
                    <li class="logos-3">Item</li>
                    <li class="logos-4">Item</li>
                    <li class="logos-5">Item</li>
                    <li class="logos-6">Item</li>
                </ul>
            </div>
        </section>

提前致谢。

4

0 回答 0