Question

我试图制作类似于幻灯片放映的东西，在那里你有一个图像，当你点击它时，它会被我的系列图像中的另一个随机替换。我首先尝试使用简单的html，但当然图像不会随意切换。所以我做了我的研究，发现它可以用Javascript中的数组来完成。我只是不太了解javascript ...

这是我能找到的，但它不起作用，我确定那里有一个我无法看到的愚蠢错误：

这是我的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";
}

有我的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>

如果有人有另一种解决方案，我可以接受它！

Answer 1

此代码正在发挥作用。我希望你的要求是

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

修复您提到的RamenChef脚本链接：

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

这里是更新后的代码，请检查console.log以查看获取请求的不同图片网址。

＆＃13;

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)];
}

＆＃13;

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

＆＃13;

使用JavaScript从图像切换到随机图像

2 个答案: