Question

我在这个项目上工作，我连续三张海报（图片）。

我想知道是否可以为每个循环的海报设置定时动画。

除了第一张海报以外都是灰色的，持续2秒，然后除了中间以外的所有灰色都是灰度2秒，然后前两个灰度为2秒。

我希望这有点道理。

感谢

Answer 1

您可以使用setInterval(function, time);让javascript无限期地重复某个功能。或者，您可以使用setTimeout，它只执行一次，但可以再次在函数本身中调用。（如果你想要一些停止条件，这很有用）

在该功能中，您只需循环浏览所有图像即可。我使用数组做到了这一点，但你也应该能够使用$('img')来选择所有图像，然后使用<any jQuery element>.get()来访问这些元素。

然后使用removeClass和addClass添加和删除一个描述您想要的效果的CSS类。

最后，您最终应该使用something like this

（来自codepen的相同代码：）

var images = [$('#img1'), $('#img2'), $('#img3')];
var currImage = 0;

function cycle() {
  images[currImage].removeClass('highlighted');
  ++currImage;
  if(currImage >= images.length)
    currImage = 0;
  images[currImage].addClass('highlighted');
}

setInterval(cycle, 2000);

img.highlighted {
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <img src="http://www.placecage.com/100/100" alt="" id="img1" class="highlighted">
  <img src="http://www.placecage.com/100/100" alt="" id="img2">
  <img src="http://www.placecage.com/100/100" alt="" id="img3">
</div>

如果你也想要动画，你可以使用jQuery或者添加

的内容

img {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

如果你想要更高级的东西，有很多关于css过渡的网页。

定时过滤器过渡动画

1 个答案: