Change image of sky every few seconds with an animation

Question

I need change the image of sky every few seconds with an animation.

like this. But without the event click, in my case, i need the change of picture with time.

    <a-assets>
        <img id="water" src="./3D/letras/Agua.jpg"/>
        <img id="air" src="./3D/letras/Aire.jpg"/>
        <img id="horizont" src="./3D/letras/Horizonte.jpg"/>
        <img id="hector" src="./3D/letras/hecxtor.jpg"/>
    </a-assets>

Answer 1

How about this.
You make two animations: a fade-in, and a fade-out:

<a-sky foo>
   <a-animation id="fadein-animation"></a-animation>
   <a-animation id="fadein-animation"></a-animation>
</a-sky>

The idea is to animate the opacity, and when the image is not visible, switch the source:

AFRAME.registerComponent("foo", {
  init: function() {
    var self = this.el
    var fadeInAnim = document.querySelector("#fadein-animation")
    var fadeOutAnim = document.querySelector("#fadeout-animation")
    var images = ["img1.jpg","img2.jpg"]
    var switchflip = 1
    fadeOutAnim.addEventListener("animationend", (e) => {
      self.setAttribute("material", "src", images[switchflip])
      switchflip = switchflip === 1 ? 0 : 1
      self.emit('fadein')
    })
    fadeInAnim.addEventListener("animationend", (e) => {
      self.emit('fadeout')
    })
 }
})

Working fiddle here.