無限スライダーを書き込もうとしていますが、何らかの理由でスライダーはリストから最初の項目のみを取得し、次の「最初の」項目で 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>
前もって感謝します。