使用简单的JS更改滑块img不透明度

Question

How i can add some fade effect by changingimg opacity using only simple JS(not Jquery)?

var step = 12;
var total = 60;

function slide(x) {
    var image = document.getElementsByClassName("clickSliderimg");
    for (var i = 0; i < image.length; i++) {
        step = step + x;
        if (step > total) {
            step = 12;
        }
        if (step < 12) {
            step = total;
        }
        image[i].src = "css/images/img" + step + ".jpg";
    };
}

Answer 1

Simply reduce the opacity and put it in a loop that repeats itself until the picture has opacity 0, then set display to none:

var img = document.getElementById('id of image to be faded').style;
  img.opacity = 1; 
(function fade(){(img.opacity-=.1)<0?img.display="none":setTimeout(fade,40)})();

Answer 2

[].forEach.call(document.getElementsByClassName("clickSliderimg"), function(el) {
   el.style.transition = 'opacity 4s';
   el.style.opacity = 0.5;
}

You should use CSS animations and transitions for simple animations and trigger them eg. by adding class to element.

Animating elements using JS tends to draw battery life, pollutes your code and is unmaintainable.

Answer 3

For performance reasons I would suggest you to use a mix of Javascript and CSS.

So you can define some CSS classes such as:

img {
    opacity: 0;
    transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
}

.visible {
    opacity: 1;
}

And then you can simply add / remove the "visible" class to your images.

# Add class
image.className += " visible";

# Remove class
image.className.replace( /(?:^|\s)visible(?!\S)/g , '' )