Question

大家好。我正在学习 JavaScript。我知道我写的这些代码不是最好的代码。我更感兴趣的是让我的代码在这个阶段工作。所以，我在 HTML 中设置了三个图像，并使用 css 设置了样式。

我只是想让图像在页面加载 3 秒后移动到某些位置，并每隔 3 秒滑动回初始位置。现在的问题是，只要用户在页面上，我就会每 3 秒重复一次。这是我写的：

目前，图像实际上按照我想要的方式滑动，但我不知道如何一遍又一遍地让这种情况发生。

var section5slidersa = document.getElementById("section5slidersa");
var section5slidersb = document.getElementById("section5slidersb");
var section5slidersc = document.getElementById("section5slidersc");
var interval = 2000;



setInterval(() => {
  section5slidersa.style.left = " -500px";
  section5slidersb.style.left = "-500px";
  section5slidersc.style.left = "540px";

  setInterval(() => {
    section5slidersc.style.left = "1190px";
    section5slidersb.style.left = "0px";
    section5slidersa.style.left = " 0px";
  }, interval);


}, interval);

 .section5container{
position: absolute;
width: 80vw;
height: 100vh;
overflow: hidden;   
}

.section5slides{
display: grid;
grid-template-columns: 500px 500px 500px;
gap: 20px;
position: absolute;
left: 210px;
top: 170px;    
}

 

.section5sliders{
background: #111924;
height: 220px;
}

   

.section5sliders img{
width: 200px;
height: 180px;
position: relative;
top: 5px;   
}

.imgbg{
background: #98ACB5;
width: 190px;
height: 180px;
position: relative;
top: 20px;
left: 20px;
}





#section5slidersa {
  position: relative;
  left: 0px;
  transition: .8s ease-out;
}

#section5slidersb {
  position: relative;
  left: 0px;
  transition: .8s ease-out;
}

#section5slidersc {
  position: absolute;
  width: 500px;
  left: 1190px;
  transition: .8s ease-out;
}

<div class="section5container">
<div class="section5slides">
<div class="section5sliders" id="section5slidersa"
<div class="imgbg"><img src="https://www.freeimages.com/photo/hand-in-
action-aiming-1-1431523" id="section5imga" alt=""></div>
</div>


<div class="section5sliders" id="section5slidersb">
<div class="imgbg"><img src="https://www.freeimages.com/photo/frog-on-
chain-link-fence-1560508" id="section5imgb" alt=""></div>
</div>

   

  <div class="section5sliders" id="section5slidersc">
<div class="imgbg"><img src="https://www.freeimages.com/photo/chain-
1446690" id="section5imgc" alt=""></div>
</div>

</div>
</div>

Answer 1

我们先把幻灯片分成两个函数，slideLeft 和slideRight。

在slideLeft 中，我们想在interval 毫秒后调用slideRight。在slideRight 中，我们想在interval 毫秒后调用slideLeft。我们可以通过在每个函数的底部添加 setTimeout(otherFunction, interval) 来解决这个问题。

最后，我们可以调用 slideLeft() 开始动画

var section5slidersa = document.getElementById("section5slidersa");
var section5slidersb = document.getElementById("section5slidersb");
var section5slidersc = document.getElementById("section5slidersc");
var interval = 2000;

slideLeft();
function slideLeft() {
  section5slidersa.style.left = " -500px";
  section5slidersb.style.left = "-500px";
  section5slidersc.style.left = "540px";
  setTimeout(slideRight, interval);
}

function slideRight() {
  section5slidersc.style.left = "1190px";
  section5slidersb.style.left = "0px";
  section5slidersa.style.left = " 0px";
  setTimeout(slideLeft, interval);
}

#section5slidersa {
  position: relative;
  left: 0px;
  transition: .8s ease-out;
}

#section5slidersb {
  position: relative;
  left: 0px;
  transition: .8s ease-out;
}

#section5slidersc {
  position: absolute;
  width: 500px;
  left: 1190px;
  transition: .8s ease-out;
}

<!doctype html>
<html>
 <body>
   <img id="section5slidersa" src="https://via.placeholder.com/150">
   <img id="section5slidersb" src="https://via.placeholder.com/150">
   <img id="section5slidersc" src="https://via.placeholder.com/150">
 </body>
</html>

我怎样才能永远循环这个动画？

1 个答案: