0

我用几个图像创建了一个幻灯片视图，并尝试将 CSS 动画应用于所有图像。

<script>
    function slideImages(){
          var img = document.getElementById('picShow');
          var images = ['images/img2.jpg','images/img3.jpg','images/img4.jpg'];
          var x = 0;
          function slide(){
               if (x < images.length){
                   x=x+1;
               }else{
                   x=1;
               }
               img.innerHTML = "<img src="+images[x-1]+">";
           }
           setInterval(slide,2500);
     }
</script>

#picShow{
    animation:fade 1.5s linear;
}
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

<div id="picShow">
      <img src="images/img1.jpg" id = "img">
</div>
<script>slideImages();</script>

我希望所有图像都被动画化，但只有第一张图像被动画化。任何人都可以帮助解决这个问题..

4

2 回答 2

0

通过在包含动画上设置<div id="picShow">动画实际上是在整个显示 div 上，而不是在单个图像上。实际上，您使用 javascript 更改图像源这一事实也会影响这一点，因为据 CSS 所知，您只有一个元素恰好具有一个新属性（而不是一个新元素）。

但是，除了 JS 之外，CSS 动画只会运行一次，除非您指定希望它运行多少次。如果你也想要它循环，你可以尝试：

#picShow {
  /* set delay to match JS timing and iteration count to infinite: */
  animation:fade 1.5s linear 2.5s infinite; 
}

不过，您很可能会遇到 JS 和 CSS 没有同时启动它们的 2.5 秒计时器的问题。

一个更一致的方法是使用 CSS 过渡而不是动画，并使用 JS 在活动的图像上切换类名而不是切换 src 属性：

HTML：

<div id="picShow">
  <img id="img1" src="https://via.placeholder.com/150/09f234" class="active" />
  <img id="img2" src="https://via.placeholder.com/150"  />
  <img id="img3" src="https://via.placeholder.com/150/09f/fff" />
</div>

CSS：

#picShow img {
  transition: opacity 1.5s linear;
  opacity: .0;
  position:absolute;
}
#picShow img.active {
  opacity:1;
}

需要修改您的 JS 以删除该类active并将其添加到下一个图像中。添加/删除类将导致每次触发 CSS 转换。我做了一个快速的 jQuery 版本，它使用你在这个 codepen 中的一些原始逻辑来说明......如果你愿意的话，没有什么是 vanilla JS 难以做到的：

https://codepen.io/anon/pen/OGJLwO

于 2019-03-30T19:37:20.593 回答
0

首先，img.innerHTML = "<img src="+images[x-1]+">"不适用于 CSS 动画。

有两种方法可以解决这个问题。

第一种是使用类并将 CSS 动画应用于它们。

function slideImages() {
  var picShow = document.getElementById("picShow");
  
  picShow.children[picShow.dataset.activeSlide].classList.remove("active")
  
  picShow.dataset.activeSlide = (parseInt(picShow.dataset.activeSlide) + 1) % picShow.children.length
  
  picShow.children[picShow.dataset.activeSlide].classList.add("active")
}
@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
@keyframes fadeOut {
    from {opacity: 1} 
    to {opacity: 0}
}

#picShow{
  height: 320px;
}
#picShow img{
  position: absolute;
}
#picShow img.active{
    animation: fadeIn 1s linear;
    opacity: 1;
}
#picShow img:not(.active){
    animation: fadeOut 1s linear;
    opacity: 0;
}
<div id="picShow" data-active-slide="0">
  <img class="active" src="https://www.dike.lib.ia.us/images/sample-1.jpg/image">
  <img src="https://www.dike.lib.ia.us/images/sample-2.jpg/image">
</div>
<button onclick="slideImages()">Next Image</button>

这里我做了一个非常简单的例子。如果图像在同一位置并且只有一个具有active类，则可以使用 JavaScript 通过更改哪个<img>元素具有active类来更改图像。

第二种方法是使用 Web Animations API。如果您有兴趣，请阅读本教程。

于 2019-03-30T19:39:59.093 回答