자바스크립트를 사용하여 이미지에서 그레이스케일 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;    
    }
}