使用 JavaScript 从图像中移除灰度 CSS 滤镜

我正在尝试循环浏览一些图片，并一次去掉它们上的一个滤镜。

var h = 0;

function removeGreyscale() {
  document.images[h].style.webkitfilter = "grayscale(0)";
  document.images[h].style.filter = "grayscale(0)";
  h += 1;
  if (h === 8) {
    h = 0;
  }
}

setInterval(removeGreyscale, 3000);

这段代码目前无法工作。

答案＃1

看起来你需要将 webkitFilter 属性中的 'f' 大写：

document.images[h].style.webkitFilter = "grayscale(1)";
document.images[h].style.filter = "grayscale(1)";

Chrome 仍然需要为 filter 属性使用 -webkit 前缀，但它在 Firefox 中应该已经可以使用了。

如果你想遍历元素，并从当前元素移除滤镜然后将其添加回前一个元素，你可以使用以下方法：

• i % images.length - 这将获取当前元素的索引，然后当 i 超过图片数量时重置回 0。

• (curr - 1 < 0 ? images.length : curr) - 1 - 同样地，这将通过从当前索引减去 1 来获取前一个元素，如果索引为 -1，则从图片总数中减去 1。

显然，在这里添加/移除/切换类并避免使用内联样式会更好，但尽管如此，这对于示例来说是可行的：

var images = document.querySelectorAll('img'),
    i = 0;

function removeGreyscale() {
  var curr = i % images.length,
      prev = (curr - 1 < 0 ? images.length : curr) - 1;
      
  // Remove grayscale filter from the current element
  images[curr].style.webkitFilter = "grayscale(0)";
  images[curr].style.filter = "grayscale(0)";
  
  // Add grayscale filter to the previous element
  images[prev].style.webkitFilter = "grayscale(1)";
  images[prev].style.filter = "grayscale(1)";
  i++;
}

setInterval(removeGreyscale, 1000);

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

<img src="//placehold.it/200/f00" />
<img src="//placehold.it/200/0f0" />
<img src="//placehold.it/200/00f" />

答案＃2

仅 CSS 解决方案: http://jsfiddle.net/t2zaf1fk/2/

HTML ：

<img src="//placehold.it/200/f00" />
<img src="//placehold.it/200/0f0" />
<img src="//placehold.it/200/00f" />

CSS ：

img {
    -webkit-animation: fade 3s linear 0 infinite;
    -webkit-filter: grayscale(1);        
}
img:nth-child(1) {
    -webkit-animation-delay:1s;
}
img:nth-child(2) {
    -webkit-animation-delay:2s
}
@-webkit-keyframes fade {
    0% {
        -webkit-filter: grayscale(1);    
    }
    65% {
        -webkit-filter: grayscale(1);    
    }
    66% {
        -webkit-filter: none;    
    }
    100% {
        -webkit-filter: none;    
    }
}