How to create image slideshow in html?

Question

I wanna make image slideshow on my web, here's my code

<head>
<script type="text/javascript">
    var image1 = new Image()
    image1.src = "images/pentagg.jpg"
    var image2 = new Image()
    image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
    <script type="text/javascript">
            function slideit()
            {
                var step=1;
                document.images.slide.src = eval("image"+step+".src")
                if(step<2)
                    step++
                else
                    step=1
                setTimeout("slideit()",2500)
            }
            slideit()
    </script>
</body>

Why it's not working? I've put image I want in images folder

You have declared the function slideit(), but you don't call it anywhere. — Matthias, Dec 13 '12 at 13:19
@AbhishekBhatia what I know is script language doesn't need any ; cmiiw :) — greenthunder, Dec 13 '12 at 13:24
@greenthunder, why haven't you selected an answer? Is your question still unanswered? — JSuar, Feb 10 '15 at 15:23

score 13 · Answer 1 · answered Apr 22 '13 at 07:12

Set var step=1 as global variable by putting it above the function call
put semicolons

It will look like this

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

So what about binding the slider to a click instead? So that the user could scroll through it and not have to wait on the timer? — isaac weathers, Dec 24 '13 at 01:51

score 3 · Answer 2 · answered Dec 13 '12 at 13:21

3

Instead of writing the code from the scratch you can use jquery plug in. Such plug in can provide many configuration option as well.

Here is the one I most liked.

http://www.zurb.com/playground/orbit-jquery-image-slider

answered Dec 13 '12 at 13:21

maximus ツ

7,949
3
25
54

You don't have to learn jquery to use this plug in. Just follow the well explained instructions. That much is suffice. – maximus ツ Dec 13 '12 at 13:39

How to create image slideshow in html?

2 Answers2

Linked