Home/ Questions/Q 8947115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:40:17+00:00

I have created the following slideshow in javascript. But for some reason on the

  • 0

I have created the following slideshow in javascript. But for some reason on the first slide through of images, the first image just moves off and the second image does the “sliding”. Any help would be appreciated. I have included comments to help make the code more readable.

<!DOCTYPE html>

<html>

<head>

<title></title>
<style type="text/css">
img.pic {
    position: absolute;
    height: 768px;
    width: 1024px;
}
html, body { 
    background-color:#3b3b35;
    width: 1024px;
    height: 768px;
    margin: 0;
    padding: 0;
    overflow:hidden;
}
</style>

</head> 

<body onload="startImages()">

<img class="pic" id="slide0" src="1.jpg" alt="pic1" />
<img class="pic" id="slide1" src="2.jpg" alt="pic2" />
<img class="pic" id="slide2" src="3.jpg" alt="pic3" />
<img class="pic" id="slide3" src="4.jpg" alt="pic4" />
<img class="pic" id="slide4" src="5.jpg" alt="pic5" />
<img class="pic" id="slide5" src="6.jpg" alt="pic6" />
<img class="pic" id="slide6" src="7.jpg" alt="pic7" />
<img class="pic" id="slide7" src="8.jpg" alt="pic8" />
<img class="pic" id="slide8" src="9.jpg" alt="pic9" />
<img class="pic" id="slide9" src="10.jpg" alt="pic10" />
<script type="text/javascript">
// Define the x start variable
var xstart = 0;

// Constructor for an image object:
function Image(obj, x) {
    this.object = obj;
    this.xpos = x;
}

// Image array
var Images = [];

// Sets up the images
function startImages() {
    for (var Imageamount = 0; Imageamount < 10; Imageamount++) {
        var Imgstore = document.getElementById("slide" + Imageamount);

        // Puts image in the array
        Images[Imageamount] = new Image(Imgstore, xstart);
        xstart = xstart - 1024;
    }
    // Controlls the delays
    setInterval(function () {
        var val = 0;
        var Interval = setInterval(function () {
            imSlide();
            val++;
            if (val == 16) clearInterval(Interval); // 16*64 = 1024, ie image size
        }, 30);
    }, 5000);
}

function imSlide() { // Controlls sliding
    for (var Slide = 0; Slide < Images.length; Slide++) {
        var image = Images[Slide];
        // Update + 64 to give a smooth slide. Updates 16 times so 16*64=1024

        var x = image.xpos + 64;
        // Move image from far right back to front of image stack
        if (x == 5120) {

            x = -5120;

        }
        // Store position back in array
        image.xpos = x;
        // Move the image
        image.object.style.left = x + "px";
    }
}

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason that your slide show skips on the first interval is because you aren’t setting the image’s position when you first create your Image objects; you’re only setting a variable that you have named ‘xpos’. This causes all your images to overlap each other and display the last image, #slide9, on top of the others on page load.

    modify your Image object declaration to this:

    function Image(obj, x) {
    this.object = obj;
    this.xpos = x;
    this.object.style.left = x + "px"; //<--- this is the new part
}

    here is the jsfiddle: http://jsfiddle.net/w9qQx/4/

    • 0