我的自定义 jQuery 旋转木马中的一个小错误

Question

我正在创建自定义 jQuery 轮播，效果非常好:)

但在其中发现了一个小故障/错误。当你像普通用户一样点击 Prev / Next 时，它工作正常但是当你像超高速机器人一样点击它时，它会滑动空白。

我在这里分享我的代码并提供 JSFiddle Link。如果有人可以帮助我或给我更好的建议以使其更专业，那就太好了:)

HTML:

<div id="my_carousel">
    <div class="carousel">
      <ul>
        <li style="background:red;"></li>
        <li style="background:green;"></li>
        <li style="background:blue;"></li>
        <li style="background:purple;"></li>
      </ul>
    </div>
</div>

CSS:

* {
padding: 0;
margin: 0;
}
#my_carousel {
padding: 0 15px;
position: relative;
height: 100px;
display: inline-block;
}
.carousel {
overflow:hidden;
position: relative;
height: 100px;
}
.carousel ul {
list-style: none;
position: absolute;
left: 0;
top: 0;
}
.carousel ul li {
width: 100px;
height: 100px;
float: left;
}
.controls {
position: absolute;
top: 50%;
left: 0;
margin: -10px 0 0;
width: 100%;
}
.prev {
float: left;
}
.next {
float: right;
}

JQUERY:

(function ($) {
$.fn.my_carousel = function (defaults) {

    // Default settings
    var settings = $.extend({
        layout: 'hort',
        visible_items: 2,
        item_width: this.find('li').width(),
        reel_width: this.find('li').length
    }, defaults);

    if (settings.layout === 'hort') {

        // Adding Prev/Next links 
        this.find('.carousel').after('<div class="controls"><a href="#" class="prev">&lt;</a><a href="#" class="next">&gt;</a></div>');

        // Setting window / reel /controls width
        this.find('.carousel').width(settings.item_width * settings.visible_items);
        this.find('ul').width(settings.reel_width * settings.item_width);

        // Slide control
        $('.controls a').click(function () {
            var pos = $(this).parents(this).find('ul').offset().left;
            if ($(this).hasClass('next')) {
                if (pos >= ((settings.item_width * settings.visible_items) - (settings.reel_width * settings.item_width) + settings.item_width)) {
                    $(this).parents(this).find('ul').animate({
                        left: '-=' + settings.item_width + 'px'
                    }, 200);
                } else {
                    return false;
                }
            } else {
                if (pos <= 0) {
                    $(this).parents(this).find('ul').animate({
                        left: '+=' + settings.item_width + 'px'
                    }, 200);
                } else {
                    return false;
                }
            }
        });
    }

};
})(jQuery);

$('#my_carousel').my_carousel();

Answer 1

此行为是由您的 if() 语句引起的，该语句正在检查您的项目的左侧位置。

当您在上一个按钮上快速点击几次（例如）时，左边的值仍然是动画的并且没有达到 0 并且下一次点击再次发生。

请查看我可以使用分页方式为您提供的解决方案：

//ADDED CODE
var currentIndex = 1;
var totalItem = $('.carousel ul li').length;
var totalIndex = totalItem - 1;



// Slide control
$('.controls a').click(function () {
    var pos = $(this).parents(this).find('ul').offset().left;
    if ($(this).hasClass('next')) {

        //REMOVED
        //if (pos >= ((settings.item_width * settings.visible_items) - (settings.reel_width * settings.item_width) + settings.item_width)) { 
        if (currentIndex != totalIndex) { //ADDED
            $(this).parents(this).find('ul').animate({
                left: '-=' + settings.item_width + 'px'
            }, 200);
            currentIndex++;//ADDED
        } else {
            return false;
        }
    } else {

        //REMOVED
        //if (pos <= 0) {

        if (currentIndex != 1) { //ADDED
            $(this).parents(this).find('ul').animate({
                left: '+=' + settings.item_width + 'px'
            }, 200);
            currentIndex--;//ADDED
        } else {
            return false;
        }
    }
});

Live exemple

编辑 1：

由于您希望能够管理显示项目的数量，这里是updated code。我将 var displayedItems = 4; 添加到 "Default settings" 中使用的代码的最顶部：

// Default settings
    var settings = $.extend({
        layout: 'hort',
        visible_items: displayedItems,
        item_width: this.find('li').width(),
        reel_width: this.find('li').length
    }, defaults);

也用于计算totalIndex :

var totalIndex = totalItem-(displayedItems-1);

我的自定义 jQuery 旋转木马中的一个小错误

A little bug in my custom jQuery carousel

jquery

carousel