fadein fadeout images that changing every few sec

Question

I have managed to write js to make images change every few seconds (10 images, no repetitions in each change). But I would like to make it look better (transitions), maybe by adding jQuery (fadein fadeout). But as I don't know jQuery well I don't have good idea how to even start... here is my code

<script type = "text/javascript">
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    function shuffle(o) {
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };
      var random = shuffle(numbers);

      var images = [], x = -1;
              images[0] = "logaban/image1.png";
              images[1] = "logaban/image2.png";
      images[2] = "logaban/image3.png";
      images[3] = "logaban/image4.png";
      images[4] = "logaban/image5.png";
      images[5] = "logaban/image6.png";
      images[6] = "logaban/image7.png";
      images[7] = "logaban/image8.png";
      images[8] = "logaban/image9.png";
      images[9] = "logaban/image10.png";

      var links = [], x = -1;
      links[0] = "link1";
      links[1] = "link2";
      links[2] = "link3";
      links[3] = "link4";
      links[4] = "link5";
      links[5] = "link6";
      links[6] = "link7";
      links[7] = "link8";
      links[8] = "link9";
      links[9] = "link10";
    function zmiana() {
            shuffle(numbers);
          document.getElementById("img1").src = images[numbers[0]];
          document.getElementById("bannerLink1").href = links[numbers[0]]; 
          document.getElementById("img2").src = images[numbers[1]];
          document.getElementById("bannerLink2").href = links[numbers[1]];
          document.getElementById("img3").src = images[numbers[2]];
          document.getElementById("bannerLink3").href = links[numbers[2]];
          document.getElementById("img4").src = images[numbers[3]];
          document.getElementById("bannerLink4").href = links[numbers[3]];
          document.getElementById("img5").src = images[numbers[4]];
          document.getElementById("bannerLink5").href = links[numbers[4]];
          document.getElementById("img6").src = images[numbers[5]];
          document.getElementById("bannerLink6").href = links[numbers[5]];
          document.getElementById("img7").src = images[numbers[6]];
          document.getElementById("bannerLink7").href = links[numbers[6]];
          document.getElementById("img8").src = images[numbers[7]];
          document.getElementById("bannerLink8").href = links[numbers[7]];
          document.getElementById("img9").src = images[numbers[8]];
          document.getElementById("bannerLink9").href = links[numbers[8]];
          document.getElementById("img10").src = images[numbers[9]];
          document.getElementById("bannerLink10").href = links[numbers[9]];
      }
    function logotypy() {

       setInterval(zmiana, 3000);
       zmiana();
    }
  </script>
 <img src="logaban/image1.png" onload = "logotypy()" style="display: none">

   <a id="bannerLink1" href="">
   <img id="img1" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink2" href="">
   <img id="img2" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink3" href="">
   <img id="img3" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink4" href="">
   <img id="img4" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink5" href="">
   <img id="img5" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink6" href="">
   <img id="img6" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink7" href="">
   <img id="img7" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img8" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img9" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink10" href="">
   <img id="img10" class="image" src="" style="max-width:100%;"></a><br>

And here my first attepmt which I added, but I really don't get how I should use those jQuery stuff, especially in this context...

 <script src="jquery-1.9.0.js" type="text/javascript"></script>
  <script>
    $("#image").attr("src").change().fadein();
  </script>

This line `$("#image").attr("src").change().fadein();` makes no sense. `.attr("src")` returns a string which doesn't have a `.change()` method to this will just generate an error. Generally if you want to fade one image out and the other image in, you use two image elements. You set the opacity of the new one to zero, set a new `.src` on it, make the two images on top of one another, fade the old one out and fade the new one in. — jfriend00, Dec 03 '13 at 00:43

score 0 · Answer 1 · edited May 23 '17 at 12:04

I really can't tell what you're trying to do with all your code. Here's a simple jQuery slideshow that uses two image objects on top of one another. It fades one out while fading the other in. It assumes the images have been preloaded and you have a container div with appropriate CSS to format it (you can see those details in the jsFiddle).

function runSlideshow(container, urls, fadeTime, delayTime) {
    // all images are preload now
    // start the slideshow
    var imgs = $(container).append(new Image()).append(new Image()).find("img");
    var curImage = 0;
    var urlIndex = -1;
    // no wait time for the first transition
    var waitTime = 0;

    function next() {
        // set src on the next image
        // fade out the current image
        // fade in the new image
        var nextImage = (curImage + 1) % 2;
        urlIndex = (urlIndex + 1) % urls.length;

        imgs.eq(curImage).delay(waitTime).fadeOut(fadeTime);
        imgs.eq(nextImage).attr("src", urls[urlIndex]).delay(waitTime).fadeIn(fadeTime, next);
        curImage = nextImage;
        // set normal wait time for subsequent images
        waitTime = delayTime;
    }
    next();
}

Working demo: http://jsfiddle.net/jfriend00/ZkqC4/

Preloading images with notification when they are done can be seen in this answer: Image preloader javascript that supports events

fadein fadeout images that changing every few sec

1 Answers1