Javascript 滑动连续开关

我有一个滑块，可以使用上一个/下一个按钮在除法器之间切换。但当分隔器结束时，滑块停止。如何更改它，使其在从一侧（下一个/上一个）到达终点时继续。假设我有4个div，1234 我单击“下一步”。。当我达到4时，当我单击4时，它应继续为1。有什么帮助吗

HTML:

JQUERY：

$(document).ready(function () {
    function shift(direction) {
        var
            $mask = $('#mask'),
            $items = $('.item'),
            items = $items.size(),
            currentItem = $mask.data('currentItem'),
            newItem;

        if (currentItem == undefined) {
            currentItem = 0;
        }

        newItem = currentItem + direction;
        $mask.data('currentItem', newItem).animate({
           marginLeft: -newItem * $items.eq(0).width()
        });

        if (newItem == 0) {
            $("#prev").prop('disabled', true);
        } else {
            $("#prev").prop('disabled', false);
        }
        if (newItem == items - 1) {
            $("#next").prop('disabled', true);
        } else {
            $("#next").prop('disabled', false);
        }
    }

    $('#prev').click(function () {
        return shift(-1);
    });
    $('#next').click(function () {
        return shift(1);
    });

    function resizePanel() {
        width = $(window).width();
        height = $(window).height();

        $('#wrapper, .item').css({
            width: width,
            height: height
        });
    }

    $(window).resize(function () {
        resizePanel();
    });
    resizePanel();
});

---

jsidle:

我对代码做了一些修改，以适应图像的循环转换

我所做的：

$('#prev').click(function () {
    if (newItem === 0) {
        newItem = itemCount - 1;
    } else {
        newItem--;
    }
    return shift();
});
$('#next').click(function () {
    if (newItem === itemCount - 1) {
        newItem = 0;
    } else {
        newItem++;
    }
    return shift();
});

• 禁用上一个/下一个按钮的代码被删除，因为它会限制图像的循环滑动
• 添加了额外的代码，用于在滑块到达端点（任意方向）时处理过渡

JS代码（相关代码）：

$('#prev').click(function () {
    if (newItem === 0) {
        newItem = itemCount - 1;
    } else {
        newItem--;
    }
    return shift();
});
$('#next').click(function () {
    if (newItem === itemCount - 1) {
        newItem = 0;
    } else {
        newItem++;
    }
    return shift();
});

现场演示@JSFiddle:

$('#prev').click(function () {
    if (newItem === 0) {
        newItem = itemCount - 1;
    } else {
        newItem--;
    }
    return shift();
});
$('#next').click(function () {
    if (newItem === itemCount - 1) {
        newItem = 0;
    } else {
        newItem++;
    }
    return shift();
});

---

建议：如果你打算用更多功能扩展当前的slider，那么我建议你使用一些现有的slider插件，“既然你已经有了轮子，为什么还要重新发明轮子呢”

你不能使用任何插件吗？@PraveenKumar不，不是真的，我是说，bxSlider提供了相同的功能，在所有浏览器上都测试过，等等。你真的应该重新发明轮子吗？@PraveenKumar但这是否意味着滑动、移位分配器？这意味着什么？