如何移除轮播最后一张幻灯片的过渡效果（JavaScript）

要实现从最后一张幻灯片直接切换到第一张（无过渡动画），可以通过动态控制过渡属性来实现：

修改JavaScript代码 #

调整goToRowSlide函数，增加参数控制是否禁用过渡，同时在nextRowSlide中处理最后一张到第一张的特殊逻辑：

let rowItemContaner = document.querySelectorAll(".row-item");
let playRowSlider;

for (let i = 0; i < rowItemContaner.length; i++) {
  let rowContainerTransition = rowItemContaner[i].querySelectorAll(".row-pic");
  let rowSlides = 0;
  let rowMaxSlides = rowContainerTransition.length;

  // 新增参数disableTransition控制是否禁用过渡
  let goToRowSlide = function (slide, disableTransition = false) {
    rowContainerTransition.forEach((container, index) => {
      if (disableTransition) {
        container.style.transition = 'none';
      } else {
        container.style.transition = '1s ease-out';
      }
      container.style.transform = `translateX(${100 * (index - slide)}%)`;
    });
    // 禁用过渡后，强制触发DOM更新再恢复过渡，不影响后续切换
    if (disableTransition) {
      requestAnimationFrame(() => {
        rowContainerTransition.forEach(container => {
          container.style.transition = '1s ease-out';
        });
      });
    }
  };

  goToRowSlide(0);

  let nextRowSlide = function () {
    if (rowSlides === rowMaxSlides - 1) {
      // 从最后一张到第一张，禁用过渡直接跳转
      goToRowSlide(0, true);
      rowSlides = 0;
    } else {
      rowSlides++;
      goToRowSlide(rowSlides);
    }
  };

  const initRowSlidex = function () {
    goToRowSlide(0);
  };
  initRowSlidex();

  let repertRowSlides = () => {
    playRowSlider = setInterval(function () {
      nextRowSlide();
    }, 2000);
  };

  repertRowSlides();
}

关键逻辑说明 #

• 当从最后一张切换到第一张时，先给所有幻灯片设置transition: none，移除过渡动画
• 切换到第一张位置后，通过requestAnimationFrame确保DOM渲染完成，再恢复过渡属性，不影响后续正常切换的动画效果
• 其他正常切换（非最后到第一张）保持原有的过渡效果

保留原有CSS和HTML #

你的CSS和HTML代码无需修改，继续使用即可：

CSS代码 #

.row { 
   display: grid;
   grid-template-columns: 24% 24% 24% 24%;
   justify-content: space-between;
}

.row-img {
  object-fit: contain;
/*   position: absolute; */
  box-shadow: none;
}

.row-item {
  position: relative;
  border: 2px solid var(--border-color-button);
  box-shadow: 0 0 5px rgb(0 0 0 / 84%);
  height: 280px;
  overflow: hidden;
}

.row-pic {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 1s ease-out;
}

.rov-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.row-link {
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
  top: 0;
  left: 0;
  /* background-color: rebeccapurple; */
}


.row-item > a {
  object-fit: contain;
  display: inline-block;
  height: auto;
}
.row-img-difrent {
  object-fit: contain;
}

HTML代码 #

<div class="row">
  <div class="row-item">
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
        <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
        <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>

    <p class="row-text">Šporeti električni test</p>
  </div>
  <div class="row-item">
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>
    <div class="row-pic">
      <div class="rov-container">
        <img class="row-img" loading="lazy" src="https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk=" alt="" />
        <a class="row-link" href="index.html"></a>
      </div>
    </div>

    <p class="row-text">Šporeti električni test</p>
  </div>
</div>

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