为什么我的JavaScript选取框不能平稳移动？

问题描述

我使用javascript创建了字幕。它将从屏幕的右向左移动以显示许多图像。图像不能像选框那样平稳地移动，而是像自动幻灯片中那样缓慢地抽动。

const slideContainer = document.querySelector('.container');
const slide = document.querySelector('.slides');
const interval = 1000;

let slides = document.querySelectorAll('.slide');
let index = 1;

const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length-1].cloneNode(true);

firstClone.id = 'first-clone';
lastClone.id = 'last-clone';

slide.append(firstClone);
slide.prepend(lastClone);

const slidewidth = slides[index].clientWidth;

slide.style.transform = `translateX(${-slidewidth * index}px,0)`;
slide.style.transition = `.7s`;



const startSlide = ()=>{
  setInterval(() => {
    index++;
    slide.style.transform = `translateX(${-slidewidth * index}px)`;
    slide.style.transition = `.7s`;

  },interval);
};

slide.addEventListener('transitionend',()=>{
    slides = document.querySelectorAll('.slide');
    console.log(index);
    if (slides[index].id===firstClone.id) {
          slide.style.transition = `none`;
          index = 1;
          slide.style.transform = `translateX(${-slidewidth * index}px)`;

    }
});

startSlide();

.{
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

.container{
  margin: 0 auto;
  width:40vw;
  height: 85vh;
  border: 2px solid #8e6c5e;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.container.hide{
  display: none;
}
.slides{
  display: flex;
  height: 100%;

}
.slide{
  /*object-fit: contain;*/
  min-width: 100%
}
.slide img{
  width: 100%;
  height: 100%;
  display: flex;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>cards of fate</title>
  </head>
  <body>
    <div class="container">
      <div class="slides">

        <div class="slide">
          
          <img src="https://cdn.pixabay.com/photo/2015/05/09/07/31/virgin-759376_960_720.jpg" alt="">
        </div>

        <div class="slide">
          
          <img src="https://cdn.pixabay.com/photo/2015/05/09/07/32/bull-759381_960_720.jpg" alt="">
        </div>

        <div class="slide">
          
          <img src="https://cdn.pixabay.com/photo/2015/05/09/07/30/twins-759375_960_720.jpg" alt="">
        </div>

        <div class="slide">
         
          <img src="https://cdn.pixabay.com/photo/2015/05/09/07/30/lion-759374_960_720.jpg" alt="">
        </div>

      </div>
    </div>
    <script src="main_v1.js"></script>
  </body>
</html>

我尝试在过渡间隔和速度附近进行游戏，但无济于事。我对此并不陌生，所以请帮帮我

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-transforms css-transitions javascript

为什么我的JavaScript选取框不能平稳移动？

问题描述

解决方法

相关问答