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;
});

您可能需要稍微修改数字，但这应该每次重置您的当前值，无论它在转盘的结尾或开头的位置如何。如果它在最后，它应该跳到开头。如果它在开始时它应该循环到最大值（结束）。

Answer 2

您可以使用JCrousell Lite插件执行此操作。您还可以使用circular property JCrousell插件。你现在正在使用它。

希望这有帮助。

Jquery图像旋转木马使它成为圆形旋转木马所以它是“无限的”

2 个答案: