如何用jQuery/原生JS为轮播当前幻灯片移除invisible类

先梳理你原代码里的核心错误：

• 类选择器缺失.：$('items.active')应改为$('.items.active')
• removeClass参数格式错误：多个类名需用空格分隔，而非逗号
• 错误给容器#inside-container添加active类，目标对象应为当前显示的.items元素

jQuery 修正版代码 #

const move = 600;
const margin_reset = (move * -1) + 'px';

setInterval(()=>{
  $("#inside-container").animate({
      marginLeft: (move * -2) +"px"
    }, 1800, function() {
      // 将第一个幻灯片移至容器末尾
      $(this).append( $(this).find('.items:first') )
        .css('margin-left', margin_reset);

      // 重置所有active项的状态：移除active类，隐藏数据区域
      $('.items.active').removeClass('active').find('.data-div').addClass('invisible');
      // 定位当前可视的幻灯片（容器margin为-600px时，第二个item是可视区域）
      const currentItem = $(this).find('.items').eq(1);
      // 为当前幻灯片添加active类，并显示数据区域
      currentItem.addClass('active').find('.data-div').removeClass('invisible');
  });
}, 4000);

// 页面加载时初始化当前active幻灯片的显示状态
$(document).ready(() => {
  $('.items.active').find('.data-div').removeClass('invisible');
});

原生JavaScript 实现版本 #

const move = 600;
const marginReset = (move * -1) + 'px';
const insideContainer = document.getElementById('inside-container');

// 初始化当前active幻灯片的显示状态
const initActiveItem = () => {
  const activeItem = document.querySelector('.items.active');
  if (activeItem) {
    activeItem.querySelector('.data-div').classList.remove('invisible');
  }
};

setInterval(() => {
  // 用CSS过渡实现动画效果
  insideContainer.style.transition = 'margin-left 1.8s ease';
  insideContainer.style.marginLeft = (move * -2) + 'px';

  setTimeout(() => {
    // 将第一个幻灯片移至容器末尾
    const firstItem = insideContainer.querySelector('.items:first-child');
    insideContainer.appendChild(firstItem);
    // 重置容器margin，关闭过渡避免跳变
    insideContainer.style.transition = 'none';
    insideContainer.style.marginLeft = marginReset;

    // 重置所有active项的状态
    document.querySelectorAll('.items.active').forEach(item => {
      item.classList.remove('active');
      item.querySelector('.data-div').classList.add('invisible');
    });

    // 定位并设置当前可视幻灯片的状态
    const currentItem = insideContainer.querySelectorAll('.items')[1];
    currentItem.classList.add('active');
    currentItem.querySelector('.data-div').classList.remove('invisible');

    // 强制重绘后重新开启过渡
    void insideContainer.offsetWidth;
    insideContainer.style.transition = 'margin-left 1.8s ease';
  }, 1800);
}, 4000);

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initActiveItem);

额外优化提示 #

你的CSS中#inside-container的初始margin-left: -200px会导致幻灯片显示不全，建议修正为：

#inside-container{
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -600px; /* 与单个幻灯片宽度一致，确保第二个item刚好显示在可视区域 */
}

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