ランダム画像注文スライドショー

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秒ごとに間隔を置く関数を実行します。この場合、何らかの理由で画像が別の画像に変更されることはありません。また、最初の画像を無作為に設定することができるようにしたいと思います。 –

私は以下のコードを変更し、私のローカルでチェックしました。今度は最初の画像にもランダムな画像があります。

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

ランダム画像注文スライドショー

答えて

関連する問題