CODEWITHSUNDEEP
javascripthtmlslideshow
LaloCast
LaloCast

Reputation: 1

How to slow down an image slideshow in html?

Looking for a (simple) way to create a slideshow for my website I found the following question here: How to create image slideshow in html?. I borrowed the (corrected) code, adapted it to my needs and now I have what I wanted, but the transition between the images is too fast. It's not about the speed of the slideshow, but the blending or fading from one image into the next. The changes come too suddenly. I want them to happen gradually and smoothly. What can I add to it or how can I change it to slow it down? Here is it:

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

Thank you for your help.

Upvotes: 0

Views: 5052

Answers (2)

gp.
gp.

Reputation: 8225

As per your comment, you want to show the transition between image changes, then use jquery and do this in sequence:

  1. Animate opacity to 0 (fadeOut),
  2. change the image,
  3. animate the opacity to 1 (fadeIn)

or write your own animation logic to do the same without jquery.

Solution using jquery:

var $slide = $(document.images.slide);

function slideit() {
    //fadeout the last image.
    $slide.fadeOut(function () {
        document.images.slide.src = eval("image" + step + ".src");
        //after changing the image, fadeIn the new image.
        $slide.fadeIn(function () {
            if (step < 2) step++;
            else step = 1;
            //everything is done... now run the timer for next slide.
            setTimeout(slideit, 5500);
        });
    })
}

jsfiddle: http://jsfiddle.net/vaf84vLd/

Upvotes: 0

Viral Shah
Viral Shah

Reputation: 2246

You can do it by doing following change in your code

setTimeout(slideit(),10000);

instead of

setTimeout(slideit(),2500);

Here 2500 means 2.5 seconds and 10000 means 10 seconds, according to need you can use any parameter.

Hope this can solve your problem.

Upvotes: 2

Related Questions