使用javascript的随机幻灯片放映

Random slideshow using javascript

本文关键字：幻灯片 随机 javascript 使用      更新时间：2023-10-11

*使用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>

这不是一个真正的幻灯片，它只是一个图像，每次单击按钮时都会随机更改源代码（调用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";
}

CCD_ 1生成从1到5的随机数。从这里开始，document.getElementById使用randomNumber来随机生成元素的部分源URL。你最终得到的是一个图像源，它取决于你随机生成的1到5之间的数字。

您可以使用以下方法随机化图像：

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

这是一个基本的想法，你可以根据自己的需要自定义这个脚本。

相关文章：