Home/ Questions/Q 6131667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:00:17+00:00

I am trying to make a slideshow and I have just started playing with

  • 0

I am trying to make a slideshow and I have just started playing with making websites and the slideshow is not working and I am not sure why. I have fixed all the errors I could so now I need some help with this…

<head>
<title>Alanna's JavaScript slide show</title>
<script language="JavaScript">

var interval = 1500;
var random_display = 0;
var imageDir = "";
var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "05.jpg");
var totalImages = imageArray.length;
function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    function get_ImageItemLocation(imageObj) {
        return (imageObj.image_item.src)
    }
    function randNum(x, y) {
        var range = y - x + 1;
        return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
        if (random_display) {
            imageNum = randNum(0, totalImages - 1);
        }
        else {
            imageNum = (imageNum + 1) % totalImages;
        }
        var new_image = get_ImageItemLocation(imageArray[imageNum]);
        return (new_image);
    }
    function getPrevImage() {
        imageNum = (imageNum - 1) % totalImages;
        var new_image = get_ImageItemLocation(imageArray[imageNum]);
        return (new_image);
    }
    function prevImage(place) {
        var new_image = getPrevImage();
        document[place].src = new_image;
    }
    function switchImage(place) {
        var new_image = getNextImage();
        document[place].src = new_image;
        var recur_call = "switchImage('" + place + "')";
        timerID = setTimeout(recur_call, interval);
    }
<!--
// -->
</script>
</head>

<body onLoad="switchImage('slideImg1')">

<img name="slideImg1" src="01.jpg" width=500 height=375 border=0>
<img name="slideImg2" src="02.jpg" width=500 height=375 border=0>
<img name="slideImg3" src="03.jpg" width=500 height=375 border=0>
<img name="slideImg4" src="04.jpg" width=500 height=375 border=0>
<img name="slideImg5" src="05.jpg" width=500 height=375 border=0>


<a href="#" onClick="switchImage('slideImg1')">play slide show</a>

<a href="#" onClick="clearTimeout(timerID)"> pause</a>

<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>

<a href="#" onClick="switchImage('slideImg2'); clearTimeout(timerID)">next </a>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Missing }

        this.image_item.src = image_location;
}    <<<<

    Have a go at this which is me guessing what you want

    <head>
<title>Alanna's JavaScript slide show</title>
<script language="JavaScript">
var interval = 1500;
var random_display = 0;
var imageDir = "";
var imageNum = 0;
var imageArray = [];
var place = "slideImg1";
for (var i=0;i<5;i++) {
  imageArray[i] = new imageItem(imageDir + "0"+i+".jpg")
}
var totalImages = imageArray.length;
function imageItem(image_location) { // preloads
    this.image_item = new Image();
    this.image_item.src = image_location;
}    
function get_ImageItemLocation(imageObj) {
    return imageObj.image_item.src;
}
function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
  var imageNum = (random_display)?randNum(0, totalImages-1):(imageNum+1) % totalImages;
  return get_ImageItemLocation(imageArray[imageNum]);
}
function getPrevImage() {
    imageNum = (imageNum-1) % totalImages;
    return get_ImageItemLocation(imageArray[imageNum]);
}
function prevImage() {
    var new_image = getPrevImage();
    document[place].src = new_image;
}
function nextImage() {
    var new_image = getNextImage();
    document[place].src = new_image;
}
window.onload=function() {
  init();
}
function init() {
    nextImage()
    timerID = setInterval(nextImage, interval);
}
</script>
</head>
<body>
<img name="slideImg1" src="01.jpg" width=500 height=375 border=0>
<a href="#" onClick="init()">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage(); clearTimeout(timerID)">previous</a>
<a href="#" onClick="nextImage(); clearTimeout(timerID)">next </a>
</body>
    • 0