基于DOM操作实现自动轮播：每2秒调整子Div顺序及类名

需求说明 #

页面加载后无需手动交互，每2秒自动调整父容器.inner-testimonial内三个子元素.slide的顺序，规则如下：

• 原第一个.slide移至第三个位置
• 原第二个.slide移至第一个位置
• 原第三个.slide移至第二个位置
  同时需保证：
• 处于第一个位置的.slide移除small类
• 处于第二、第三个位置的.slide始终带有small类

实现代码 #

HTML结构（沿用给定结构）

<div class="inner-testimonial">        
    <div class="slide">
        <h4>Copy here</h4>
    </div>
    <div class="slide small">
        <h4>Copy here</h4>
    </div>
    <div class="slide small">
        <h4>Copy here</h4>
    </div>
</div>

jQuery完整实现

// 页面加载完成后初始化自动轮播
$(document).ready(function() {
    // 每2秒执行一次顺序调整逻辑
    setInterval(function() {
        var $container = $('.inner-testimonial');
        var $slide1 = $container.find('.slide:nth-child(1)');
        var $slide2 = $container.find('.slide:nth-child(2)');
        var $slide3 = $container.find('.slide:nth-child(3)');
        
        // 按规则重排顺序：原第二个移到最前，原第一个移到最后
        $container.prepend($slide2).append($slide1);
        
        // 修正类名：第一个位置移除small，后两个位置添加small
        $container.find('.slide:nth-child(1)').removeClass('small');
        $container.find('.slide:nth-child(2), .slide:nth-child(3)').addClass('small');
    }, 2000);
});

代码说明 #

1. 定时器触发：用setInterval设置2秒间隔，自动重复执行轮播逻辑。
2. 元素定位：先获取父容器和三个slide元素，避免重复DOM查询。
3. 顺序调整：通过prepend()将原第二个slide移到容器最前端，append()将原第一个slide移到容器末尾，自动形成需求的顺序结构。
4. 类名修正：重新根据当前位置设置small类，确保元素移动后类名符合规则，避免残留或缺失。

内容的提问来源于stack exchange，提问作者Anrich Vigus