CODEWITHSUNDEEP
javascripthtml
Jon Dewey
Jon Dewey

Reputation: 25

Random Image Order Slideshow

Made a slideshow that changed the main background picture every 7 seconds in the js file. The only problem with it is that the order is random except for the first picture. AND I started messing with it, and now the picture won't change. Please help!

Here's my index:

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

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

Upvotes: 0

Views: 705

Answers (2)

Venkatesh Konatham
Venkatesh Konatham

Reputation: 828

I have modified below code and checked on my local. Now it's having random images for the first image as well. 

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

Upvotes: 0

Kriengkri Pongpanjanthra
Kriengkri Pongpanjanthra

Reputation: 68

Add this code after set attribute.

myImage.src = imageArray[imgIndex];

Upvotes: 1

Related Questions