Javascript Random image, random transition slideshow

Question

I currently have an image slideshow in which I have random images, but I can't seem to find a way to prevent the images from loading at start and to apply random transitions. Can someone please help? Thanks.

<

pre><html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;               
              document.getElementById("img").src = images[x];
}
          function startTimer() {
              setInterval(displayNextImage, 4000);
          }
          var trans=[
              
              ]; 
          var images = [
              "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/10.png" ,
                "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/11.png" ,
                "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/12.png" ,
                "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/13.png" ,
                "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/14.png"
              ], x = -1;
          
      </script>
   </head>
<body onload = "startTimer()">
       <img id="img" src="https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/1.png" data-transition="slideInLeft" />
   </body>
</html>

Answer 1

The following code starts from the first image and then generate a random index to select the next image. It avoids to select the same image twice in a row.

JS :

function displayNextImage() {
    var bkX = x;
    x = (x === images.length - 1) ? 0 : Math.floor(Math.random() * images.length + 1);  

    //If new X is the same as old X and is not the last image, incremnt to avoid the same image twice in a row
    if (bkX === x && x !== images.length)
        x++;
    //If new X is the same as old X but is the last image, decrement
    else if (bkX === x && x === images.length)
        x--;
    console.log("x " + x);

    document.getElementById("img").src = images[x];
}

function startTimer() {
    setInterval(displayNextImage, 4000);
}

var trans=[]; 
var images = [
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/10.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/11.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/12.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/13.png" ,
    "https://cosecha-verde.000webhostapp.com/images/Centro/2016-2017/14.png"
], 
x = -1;

JSFIDDLE : https://jsfiddle.net/xentd0fo/1/

Javascript Random image, random transition slideshow

Question

1 answers

solution1
1 2020-10-03 11:22:24

Javascript Random image, random transition slideshow

Question

1 answers

solution1 1 2020-10-03 11:22:24

solution1
1 2020-10-03 11:22:24