基于jQuery的无限循环轮播实现问题求助

你的现有代码在切换到轮播首尾时无法继续循环，原因是next()和prev()仅查找相邻的目标元素，当没有符合条件的相邻元素时就会失效。以下是修改后的实现方案，通过判断是否存在下一个/上一个目标元素，切换到轮播的另一端来实现无限循环：

修改后的JavaScript代码 #

$(function() {
    // 初始化所有slide为隐藏状态
    $(".slides .slide").addClass("car-unactive");
    // 默认显示前3个slide
    $(".slides .slide:nth-child(-n+3)").switchClass("car-unactive","car-active");

    // 右箭头点击事件：向后切换
    $(".arrow-container--right button").click(function(){
        const $lastActive = $(".slides .slide.car-active:last");
        // 查找当前最后一个active之后的第一个unactive元素
        let $nextSlide = $lastActive.next(".slides .slide.car-unactive");
        
        // 如果没有找到（已到轮播末尾），则取第一个unactive元素（轮播开头）
        if (!$nextSlide.length) {
            $nextSlide = $(".slides .slide.car-unactive:first");
        }

        $nextSlide.switchClass("car-unactive","car-active");
        // 隐藏第一个active元素
        $(".slides .slide.car-active:first").switchClass("car-active","car-unactive");
    });

    // 左箭头点击事件：向前切换
    $(".arrow-container--left button").click(function(){
        const $firstActive = $(".slides .slide.car-active:first");
        // 查找当前第一个active之前的最后一个unactive元素
        let $prevSlide = $firstActive.prev(".slides .slide.car-unactive");
        
        // 如果没有找到（已到轮播开头），则取最后一个unactive元素（轮播末尾）
        if (!$prevSlide.length) {
            $prevSlide = $(".slides .slide.car-unactive:last");
        }

        $prevSlide.switchClass("car-unactive","car-active");
        // 隐藏最后一个active元素
        $(".slides .slide.car-active:last").switchClass("car-active","car-unactive");
    });
});

CSS代码（无需修改） #

.car-active{
    display:block !important;
}
.car-unactive{
    display:none !important;
}

HTML代码（无需修改） #

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<ul class="slides slides--initialized" style="min-height: 100vh;">
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false"></li>
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(-9999px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(-453px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
</ul>
<div class="desktop-arrows arrow-container arrow-container--left" style="left: 3vw;" id="yui_3_17_2_1_1661374034720_420">
    <button class="user-items-list-banner-slideshow__arrow-button user-items-list-banner-slideshow__arrow-button--left" aria-label="Previous" data-animation-role="button" id="yui_3_17_2_1_1661374034720_419">
        <div class="user-items-list-banner-slideshow__arrow-icon-background user-items-list-banner-slideshow__arrow-icon-background-area"></div>
    </button>
</div>
<div class="desktop-arrows arrow-container arrow-container--right" style="right: 3vw;" id="yui_3_17_2_1_1661374034720_404">
    <button class="user-items-list-banner-slideshow__arrow-button user-items-list-banner-slideshow__arrow-button--right" aria-label="Next" data-animation-role="button" id="yui_3_17_2_1_1661374034720_403">
        <div class="user-items-list-banner-slideshow__arrow-icon-background user-items-list-banner-slideshow__arrow-icon-background-area" id="yui_3_17_2_1_1661374034720_402"></div>
    </button>
</div>

关键改动说明 #

• 右箭头逻辑：当最后一个active slide之后没有unactive slide时，直接选取第一个unactive slide，实现从末尾跳转到开头的循环。
• 左箭头逻辑：当第一个active slide之前没有unactive slide时，直接选取最后一个unactive slide，实现从开头跳转到末尾的循环。
• 新增变量存储DOM元素，避免重复查找，提升性能。

内容的提问来源于stack exchange，提问作者Muhammad Waqas