javascript - Jquery 图像轮播使其成为圆形轮播所以它是 “infinite”

Question

我有这个图片轮播，但我想把它做成圆形，这样它就可以无限滚动 我该如何修改这段代码才能做到这一点？另外，如果可能的话，我该如何让它自动滚动？

HTML:

<div id="my_carousel">
<ul>
    <li>some content...</li>
    <li>some content...</li>
    <li>some content...</li>
    <li>some content...</li>
    <li>some content...</li>
    <li>some content...</li>
    .....
</ul>

<script language="javascript">
$(function() {
    var step = 2; 
    var current = 0; 
    var maximum = $('#my_carousel ul li').size(); 
    var visible = 2; 
    var speed = 200; 
    var liSize = 331;
    var carousel_height = 161;


    var ulSize = liSize * maximum;   
    var divSize = liSize * visible;  

    $('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");

    $('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 

    $('.btnnext').click(function() { 
        if(current + step < 0 || current + step > maximum - visible) {return; }
        else {
            current = current + step;
            $('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });

    $('.btnprev').click(function() { 
        if(current - step < 0 || current - step > maximum - visible) {return; }
        else {
            current = current - step;
            $('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });
});
 </script>

Answer 1

你可以尝试这样的事情:

$('.btnnext').click(function() { 
    if(current + step < 0 || current + step > maximum - visible) {
        current = maximum - step;
    }
    else {
        current = current + step;
    }

    $('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
    return false;
});

$('.btnprev').click(function() { 
    if(current - step < 0 || current - step > maximum - visible) {
        current = 0 + step;
    }
    else {
        current = current - step;
    }

    $('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
    return false;
});

您可能需要稍微修改一下数字，但这应该每次都会重置您的当前值，无论它位于轮播的末尾还是开头。如果它在最后，它应该跳到开头。如果它在开始，它应该循环到最大值(结束)。