Question

我在codepen上创建了一个简单的jquery滑块，由于某种原因，在最后一张幻灯片中，它恢复到最后一个并且错误。

    if ( $(window).width()<= 700) {  

  jQuery(document).ready(function($) { 

 $('.switch-mobile').removeClass('small-products-text product-item-texts zstarrating2 small-pic-wrapper grid-item large--one-quarter medium--one-half small--one-whole on-sale home-small-products grid-uniform featured-row grid-item large--one-quarter medium--one-half small--one-whole on-sale'); 


var slideCount = $('.tester ul li').length;
var slideWidth = $('.tester ul li').width();
var slideHeight = $('.tester ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('.tester').css({ width: slideWidth, height: slideHeight });

$('.tester ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('.tester ul li:last-child').prependTo('.tester ul');

function moveLeft() {
    $('.tester ul').animate({
        left: + slideWidth
    }, 300, function () {
        $('.tester ul li:last-child').prependTo('.tester ul');
        $('.tester ul').css('left', '');
    });
};

function moveRight() {
    $('.tester ul').animate({
        left: - slideWidth
    }, 300, function () {
        $('.tester ul li:first-child').appendTo('.tester ul');
        $('.tester ul').css('left', '');
    });
};

$('.tester_prev').click(function () {
    moveLeft();
    return false;
});

$('.tester_next').click(function () {
    moveRight();
    return false;
});

}）;

}

请在移动视图中滚动到滑块的末尾，您可以看到我的意思，它不会回到第一张幻灯片。您将能够在链接中找到HTML，出于某种原因，我不会允许我粘贴它。

Answer 1

将列表元素追回'.target ul'后，新附加的列表项将不会返回$（'。target ul li：first-child'）。使用.first()获取第一个孩子，使用.last()获取最后一个孩子。所以你的代码看起来像这样：

function moveLeft() {
    $('.tester ul').animate({
        left: + slideWidth
    }, 300, function () {
        $('.tester ul li').last().prependTo('.tester ul');
        $('.tester ul').css('left', '');

    });
};

function moveRight() {
    $('.tester ul').animate({
        left: - slideWidth
    }, 300, function () {
         $('.tester ul li').first().appendTo('.tester ul'); 
        $('.tester ul').css('left', '');

    });
};

简单的jquery滑块不会一直滑过幻灯片

1 个答案: