隨機圖片訂單幻燈片

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

來源

2016-10-17 Jon Dewey

請您發表撥弄例如 –

你能成爲一個更具體一點，什麼你的代碼的問題呢？ – Sreekanth

該頁面包含一個應該隨機更改爲另一個圖像的背景圖像;又名幻燈片。 JS運行每隔6秒間隔的功能。在這種情況下，出於某種原因，圖片將不會更改爲其他圖片。另外，我希望能夠隨機設置第一張圖片，而不是總是圖片1。 –

我修改了下面的代碼並在我的本地進行了檢查。現在它的第一張圖像也有隨機圖像。

<!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>

來源

2016-10-17 07:17:57

添加該代碼後設置屬性。

myImage.src = imageArray[imgIndex];

來源

2016-10-17 06:07:01

隨機圖片訂單幻燈片

回答

相關問題