定时滤镜转换动画

Question

im 在这个项目上工作，我连续有三张海报(图像)。

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

就像除了第一张海报之外的所有海报都是灰度的，2秒，然后除了中间之外的所有海报都是灰度的2秒，然后前两张海报是灰度的2秒。

我希望这有点道理。

谢谢

Answer 1

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

在该函数中，您所要做的就是循环浏览所有图像。我使用数组做到了这一点，但您还应该能够使用$('img')，它选择所有图像，然后使用<any jQuery element>.get()访问这些元素。

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

最后你应该得到这样的东西

(此处的代码笔代码相同：)

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 过渡的页面。