Home/ Questions/Q 8934699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:50:50+00:00

I am trying to make a slideshow from the book Javascript in 24 Hours

  • 0

I am trying to make a slideshow from the book Javascript in 24 Hours from 2008. I think I have copied the code identically, yet the pictures shuffle, but they do not slide in as the book says they should. Does anyone mind taking the time to look this over?
Thanks in advance!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Slideshow</title>
<style>
img.slide {
position: absolute;
left:0;
top:0;
}

#slideshow {
    position:relative;
    overflow:hidden;
    width:400px;
    height:400px;
}
</style>

<script>
// Slideshow
// Global variables
var numslides=0;
var currentslide=0,oldslide=4;
var x = 0;
var slides = new Array();
function MakeSlideShow() {
imgs=document.getElementsByTagName("img");
for (i=0; i<imgs.length; i++) {
    if (imgs[i].className != "slide") continue;
    slides[numslides]=imgs[i];
    //Stack images with the first slide on top
    if (numslides==0) {
        imgs[i].style.zIndex=10;
    }
    else {
        imgs[i].style.zIndex=0;
    }
    imgs[i].onclick=NextSlide;
    numslides++;
} // end for loop
}// end MakeSlideShow

function NextSlide() {
//Set the current slide to be under the new top slide
slides[currentslide].style.zIndex=9;
// Move older slide to the bottom of the stack
slides[oldslide].style.zIndex=0;
oldslide = currentslide;
currentslide++;
if (currentslide >= numslides) currentslide = 0;
// Start at the right edge
slides[currentslide].style.left=400;
x=400;
//Move the new slide to the top
slides[currentslide].style.zIndex=10;
AnimateSlide();
}

function AnimateSlide() {
// Lower moves slower, higher moves faster
x = x - 25;
slides[currentslide].style.left=x;
//Previous image moves off the left edge
slides[oldslide].style.left=x-400;
//Repeat until until the slide is at the zero position
if (x > 0) window.setTimeout("AnimateSlide();",10);
}
</script>
</head>

<body onload="MakeSlideShow();">
            <div id = "slideshow">
                <img class = "slide" src = "pic1.jpg" width = "400px" height = "400px" >
                <img class = "slide" src = "pic2.jpg" width = "400px" height = "400px" >
                <img class = "slide" src = "pic3.jpg" width = "400px" height = "400px" >
                <img class = "slide" src = "pic4.jpg" width = "400px" height = "400px" >
                <img class = "slide" src = "pic5.jpg" width = "400px" height = "400px" >
            </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hi Your script is very fine …

    The problem is in two lines of this function 

        function AnimateSlide() {
    ...
    ...
    slides[currentslide].style.left=x;
    slides[oldslide].style.left=x-400;
    ...
    }

    Modification is that left value should have “px”. So Modified Lines are 

    slides[currentslide].style.left=x +"px";
slides[oldslide].style.left=x-400 +"px";

    Now it is sliding. jsfiddle Demo path is http://jsfiddle.net/naveenksh/Jvkcc/5/

    • 0