随机图像顺序幻灯片

Random Image Order Slideshow

本文关键字：幻灯片 顺序 图像 随机      更新时间：2023-09-26

制作一个幻灯片，在js文件中每7秒更换一次主背景图片。唯一的问题是，除了第一张图片，顺序是随机的。然后我开始乱涂乱画，现在这幅画还是没变。请帮助!

这是我的索引:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link type="text/css" rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="topdiv">
<h1 id="title" class="title">Photography</h1>
<div style="text-align: center">
    <button id="aboutbutton" class="button">About</button>
    <button id="contactbutton" class="button">Contact</button>
    <button id="picturesbutton" class="button">Pictures</button>
</div>
</div>
<img id="photo" src="pictures/1.jpg">
<script type="text/javascript"/>

    </body>
    </html>

我的JS: 

var myImage = document.getElementById("photo");
var imageArray=["pictures/1.JPG", "pictures/2.JPG", "pictures/3.JPG",         "pictures/4.JPG", "pictures/5.JPG", "pictures/6.JPG", "pictures/7.JPG", "pictures/8.JPG", "pictures/9.JPG", "pictures/10.JPG"];
var imgIndex = getRandomInt(0, imageArray.length);
var isIntervalRunning;
function changeImage(){
myImage.setAttribute("src", imageArray[imgIndex]);
imgIndex++;
if (imgIndex >= imageArray.length) {
    imgIndex = 0;
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var intervalHandle = setInterval(changeImage, 6000);
document.getElementById("title").onclick = function () {
    location.href = "index.html";}
document.getElementById("aboutbutton").onclick = function () {
    location.href = "about.html";}
document.getElementById("contactbutton").onclick = function () {
    location.href = "contact.html";}
document.getElementById("picturesbutton").onclick = function () {
    location.href = "pictures.html";}

在set属性后添加此代码。

myImage.src = imageArray[imgIndex];

我已经修改了下面的代码，并检查了我的本地。现在第一张图像也是随机的。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Photography</title>
    <link type="text/css" rel="stylesheet" href="main.css"/>
</head>
<body>
    <div id="topdiv">
        <h1 id="title" class="title">Photography</h1>
        <div style="text-align: center">
            <button id="aboutbutton" class="button">About</button>
            <button id="contactbutton" class="button">Contact</button>
            <button id="picturesbutton" class="button">Pictures</button>
        </div>
    </div>
    <img id="photo">
    <script type="text/javascript">
        var myImage = document.getElementById("photo");
        var imageArray = ["pictures/1.JPG", "pictures/2.JPG", "pictures/3.JPG", "pictures/4.JPG", "pictures/5.JPG", "pictures/6.JPG", "pictures/7.JPG", "pictures/8.JPG", "pictures/9.JPG", "pictures/10.JPG"];
        var imgIndex = getRandomInt(0, imageArray.length);
        var isIntervalRunning;
        function changeImage() {
            debugger;
            myImage.setAttribute("src", imageArray[imgIndex]);
            imgIndex++;
            if (imgIndex >= imageArray.length) {
                imgIndex = 0;
            }
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var intervalHandle = setInterval(changeImage, 6000);
        document.getElementById("title").onclick = function () {
            location.href = "index.html";
        }
        document.getElementById("aboutbutton").onclick = function () {
            location.href = "about.html";
        }
        document.getElementById("contactbutton").onclick = function () {
            location.href = "contact.html";
        }
        document.getElementById("picturesbutton").onclick = function () {
            location.href = "pictures.html";
        }
        changeImage();
    </script>
</body>

相关文章：