Q: Slideshow Array image with Opacity (fading in and out) I´ve made a code that shows 5 images in a slideshow (when pushing next button).
I want to have opacity go from 1.0 to 0.1 and to 1.0 again when changing pictures .
How can I do that without jQuery, only simple JavaScript.
My current code (JSFiddle):


var imgTab = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "5.jpg"];
var imgTxt = ["img 1", "img 2", "img 3", "img 4", "img 5"];
var imgNr = 0;

function getImg() {

  document.getElementById("output").innerHTML = "<img src= \"" + imgTab[imgNr] + "\" alt = \"img\" />" + "<p>" + imgTxt[imgNr] + "</p>";
  imgNr++;

  if (imgNr == 5) {
    imgNr = 0;
  }

}
<body onload="getImg()">
  <div id="output">

  </div>
  <input type="button" value="next" onclick="getImg()" />
</body>


Hope anyone can help me :)

A: You should use style.opacity to access that CSS property and change it to 1 or 0 accordingly.
setTimeout can then reverse the opacity, after an amount of time.
 var thisImg= document.getElementById('yourImg');

 thisImg.style.opacity = 0.1;

 setTimeout(function(){
     thisImg.style.opacity = 1
 },1000);


I'm having a feel that you are looking for fading transparency though, which can be easily done with jQuery since it has fadeIn() & fadeOut() methods built in.
Otherwise you can use setInterval to add/remove opacity in steps if you want it in pure JS
