使用javascript随机播放幻灯片

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 个解决方案

解决方案1
0 已采纳 2013-11-24 22:19:54

解决方案2
0 2013-11-24 22:20:39

使用javascript随机播放幻灯片

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-11-24 22:19:54

解决方案2 0 2013-11-24 22:20:39

解决方案1
0 已采纳 2013-11-24 22:19:54

解决方案2
0 2013-11-24 22:20:39