switch from image to random image onclick with JavaScript

问题

I'm trying to build something that would resemble a slide show, where you have an image and when you click on it, it is replaced by another randomly in my series of images. I first tried with simple html, but of course the images don't switch randomly. So I did my research and found that it could be done with an array in Javascript. I just don't really know a lot about javascript…

This is what I could find but it doesn't work, I'm sure there is a stupid mistake in there that I can't see:

this is my javascript

function pickimg2() {
    var imagenumber = 2 ;
    var randomnumber = Math.random();
    var rand1 = Math.round((imagenumber-1) * randomnumber) + 1;
    myImages1 = new Array();
    myImages1[1] = "img_01.gif";
    myImages1[2] = "img_02.gif";
    myImages1[3] = "img_03.gif";
    myImages1[4] = "img_04.gif";
    myImages1[5] = "img_05.gif";
    myImages1[6] = "img_06.gif";
    myImages1[7] = "img_07.gif";
    myImages1[8] = "img_08.gif";
    myImages1[9] = "img_09.gif";
    var image = images[rand1];
    document.randimg.src = "myImages1";
}

there is my html

<!DOCTYPE html>
<html>
    <head>
        <title>mur</title>
        <link rel="stylesheet" href="style.css">
        <link rel="JavaScript" href="script.js">
    </head>
    <body onLoad="pickimg2">
        <div class="fenetre">
            <a href="" onClick="pickimg();return false;"><img src="img_01.gif" name="randimg" border=0></a>
        </div>
    </body>
</html>

If someone has another solution I'm open to it!

回答1:

Fix your script link like RamenChef mentioned:

<script type="text/javascript" src="script.js"></script>

Here's the updated code, check console.log to see the different image urls getting requested.

var myImages1 = new Array();
myImages1.push("img_01.gif");
myImages1.push("img_02.gif");
myImages1.push("img_03.gif");
myImages1.push("img_04.gif");
myImages1.push("img_05.gif");
myImages1.push("img_06.gif");
myImages1.push("img_07.gif");
myImages1.push("img_08.gif");
myImages1.push("img_09.gif");

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2() {
  document.randimg.src = myImages1[getRandomInt(0, myImages1.length - 1)];
}

<div class="fenetre">
  <a href="#" onClick="pickimg2();return false;">
    <img src="img_01.gif" name="randimg" border=0>
  </a>
</div>

回答2:

this code bellow is working. I hope it's what you were asking for

var images = [ 
  "http://img1.science-et-vie.com/var/scienceetvie/storage/images/galerie/deepsea-challenge-le-film-de-james-cameron-livre-des-images-inedites-des-grands-fonds-marins-5165/19818-1-fre-FR/Deepsea-challenge-le-film-de-James-Cameron-livre-des-images-inedites-des-grands-fonds-marins_square500x500.jpg", 
  "http://static.mensup.fr/photos/145240/carre-premieres-images-officielles-pour-assassin-s-creed-rogue.jpg",
  "http://www.pnas.org/site/misc/images/16-01910.500.jpg" ];

init();

function random_image(images) {
  var random = randomize(images);
  while(images[random] === document.getElementById("image").src){
    random = randomize(images)
  }
  document.getElementById("image").src = images[random].toString();
}

function randomize(array){
  return Math.floor((Math.random() * (array.length)));
}

function init() {
  document.getElementById("image").addEventListener("click", function(){
    random_image(images);
  });
  random_image(images);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Bonjour</title>
    </head>
    <body >
        <div class="fenetre">
            <img id="image" src="" name="randimg" >
        </div>
    </body>
</html>

来源：https://stackoverflow.com/questions/40110239/switch-from-image-to-random-image-onclick-with-javascript

标签

javascript

html

arrays

random

onclick