用js实现两张图片一个跑一个在后面追

答案：可以使用CSS3的动画来实现这个效果，代码如下：

HTML部分：

<div class="container">
  <img class="runner1" src="runner1.png">
  <img class="runner2" src="runner2.png">
</div>

CSS部分：

.container {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.runner1, .runner2 {
  position: absolute;
  top: 0;
}

.runner1 {
  animation: runner1 2s linear infinite;
}

.runner2 {
  animation: runner2 2s linear infinite;
  animation-delay: 1s;
}

@keyframes runner1 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes runner2 {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

这样就可以实现两张图片一个跑一个在后面追的效果了。

相关问题

写一个用JavaScript实现五张图片的动态轮播效果模板

好的，以下是一个用JavaScript实现五张图片的动态轮播效果模板：

HTML结构：

<div class="slideshow-container">
  <div class="slideshow-slide">
    <img src="img1.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img2.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img3.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img4.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img5.jpg">
  </div>
</div>

CSS样式：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 1;
}

JavaScript代码：

var slides = document.querySelectorAll('.slideshow-slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

解释：

首先，我们使用`querySelectorAll()`方法获取到所有的轮播图片，并将它们存储在变量`slides`中。

然后，我们定义了一个变量`currentSlide`来存储当前显示的图片，以及一个名为`slideInterval`的定时器，用于每隔5秒钟切换到下一张图片。

接下来，我们定义了一个名为`nextSlide()`的函数，用于切换到下一张图片。在这个函数中，我们首先将当前显示的图片的`active`类删除，然后通过取模运算计算出下一张图片的索引，并将其添加`active`类以显示出来。

最后，我们在页面加载完成后调用`nextSlide()`函数以显示第一张图片，并开始自动轮播。

js一个按钮来回切换两张图片通过更改图片地址实现

HTML代码：

<button id="myButton">切换图片</button>
<img id="myImage" src="image1.jpg">

JavaScript代码：

var myButton = document.getElementById("myButton");
var myImage = document.getElementById("myImage");

myButton.addEventListener("click", function() {
  if (myImage.src.endsWith("image1.jpg")) {
    myImage.src = "image2.jpg";
  } else {
    myImage.src = "image1.jpg";
  }
});

解释：

1. 首先，我们获取按钮和图片元素。
2. 然后，我们给按钮添加一个点击事件监听器。
3. 在点击事件处理函数中，我们检查当前图片的src属性是否以"image1.jpg"结尾。如果是，则将其更改为"image2.jpg"，否则将其更改为"image1.jpg"。这样就能循环切换这两张图片。