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

Jquery image carousel make it circular carousel so it is “infinite”

本文关键字：旋转木马 无限 无限的 图像 Jquery      更新时间：2023-09-26

我有一个图像轮播但是我想把它做成圆形这样它就可以无限滚动我该如何修改这段代码来实现这个功能呢?如果可能的话，我该如何使它自动滚动?

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>

您可以尝试这样做:

$('.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;
});

您可能需要对数字进行一些修改，但这将每次重置当前值，而不管它位于旋转木马的末尾或开头。如果它在结尾，它应该跳到开头。如果它在开始，它应该循环到最大值(结束)

你可以使用jcroousell Lite Plugin。你也可以使用jcroousell插件的循环属性。你现在正在使用的。

相关文章：