Question

我正在创建一个自定义的jQuery轮播，它的表现非常出色：）

但是发现了一点小故障/错误。当您像普通用户一样单击上一个/下一个时，它可以正常工作，但是当您像超高速机器人一样点击它时，它会滑动空白区域。

我在这里分享我的代码并提供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;添加到＆＃34;默认设置＆＃34;中使用的代码的最顶部。：

// 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轮播中的一个小bug

1 个答案: