随机图像顺序幻灯片
[英]Random Image Order Slideshow
问题描述
进行了一次幻灯片演示，该演示稿每7秒更改一次js文件中的主要背景图片。 唯一的问题是除第一张图片外，顺序是随机的。 然后我开始弄乱它，现在图片不会改变。 请帮忙！
这是我的索引：
<!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";}
2 个解决方案
解决方案1
1 2016-10-17 06:07:01
在set属性之后添加此代码。
myImage.src = imageArray[imgIndex];
解决方案2
0 已采纳 2016-10-17 07:17:57
我已经修改了以下代码，并在本地检查了。 现在，第一个图像也具有随机图像。
<!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>
jQuery幻灯片加载随机随机图像顺序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.