CODEWITHSUNDEEP
javascriptjquery
taki Martillo
taki Martillo

Reputation: 406

JavaScript slide show only showing every OTHER image

all,

I am having the strangest problem. I had a slideshow script on my page that worked PERFECTLY until like... ten minutes ago. And NOW the thing is still working, but it's only showing every other image. Strange. It only shows 01.jpg, 03.jpg, 05.jpg, and I cannot fathom why.

Code:

<script type="text/javascript">
        // Only run everything once the page has completely loaded
        $(window).load(function () {
            var imgs = [
                'Images/Slideshow/02.jpg',
                'Images/Slideshow/03.jpg',
                'Images/Slideshow/04.jpg',
                'Images/Slideshow/05.jpg',
                'Images/Slideshow/06.jpg',
                'Images/Slideshow/01.jpg'];

            var cnt = imgs.length;
            function Slider() {
                $('#imageSlide').fadeOut(5000, function () {
                    $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn(2000);
                });
            }
            $(function () {
                setInterval(Slider, 5000);
            });
        });
    </script>

Again... weirdest thing I've ever seen. Anyone have any clue what this could be about? I'm at a loss.

Upvotes: 0

Views: 91

Answers (1)

ariel
ariel

Reputation: 16140

Your fadeout + fadein time (5000 + 2000) have to be smaller than the interval timer (5000).

Try this:

function Slider() {
    $('#imageSlide').fadeOut(1000, function () {
        $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn(1000);
    });
}
$(function () {
    setInterval(Slider, 5000);
});

Upvotes: 1

Related Questions