gpt4 book ai didi

javascript - 随机图像顺序幻灯片

转载 作者:行者123 更新时间:2023-12-03 05:52:48 25 4
gpt4 key购买 nike

制作了一个幻灯片,在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";}

最佳答案

在设置属性后添加此代码。

myImage.src = imageArray[imgIndex];

关于javascript - 随机图像顺序幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40079415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com