Question

*使用JavaScript，实现具有以下要求的图像幻灯片查看器：

将HTML页面命名为imageSlideShow.html，并将相应的JavaScript命名为 imageSlideShow.js
幻灯片应包含5个不同的图像。
点击一个按钮后，必须在其上显示随机选择的另一张照片网页。

我有部分脚本，但我无法弄清楚如何使用随机按钮实际创建幻灯片。

这就是我对javascript的所作所为：

var image1=New Image()
image1.src="image1.jpg"

var image2=New Image()
image1.src="image2.jpg"

var image3=New Image()
image1.src="image3.jpg"

var image4=New Image()
image1.src="image4.jpg"

var image5=New Image()
image1.src="image5.jpg"

这就是html部分的样子：

<html>
    <head>
    </head>
    <body>
        <script type="text/Javascript" src="imageSlideShow.js"></script>
        <img src="image1.jpg" name="slide1">
        <br>
        <br>
        <button type="button" value="random" onclick="slideshow()" >Random Image</button>
    </body>
</html>

Answer 1

这不是幻灯片，它只是一个图像，每次单击一个按钮（调用JavaScript函数）时，您都会随机更改源。

我的建议是使用JavaScript生成1到5之间的随机数。这样的事情：

<强> HTML：

<img src="" id="image">

<强> JavaScript的：

function buttonClicked() {
    var randomNumber = Math.floor((Math.random()*5)+1);
    document.getElementById("image").src="image"+randomNumber+".jpg";
}

Math.floor((Math.random()*5)+1)生成1到5的随机数。从此处document.getElementById使用randomNumber随机生成元素的部分源URL。你最终获得的是一个图像源，它取决于你随机生成的1到5之间的数字。

Answer 2

您可以使用此功能随机化图像：

   function shuffle(o){ //v1.0
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

var imgs ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];

imgs = shuffle(imgs);

var pos = 0;

slideshow(){
   image1.src=imgs[pos];
   pos = (pos+1)%imgs.length;
}

这是基本想法，您可以根据需要自定义此脚本。

随机幻灯片使用JavaScript

2 个答案: