Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Need help with the Next and Previous for SlideShow

    Hello, Basically I am coding a simple JavaScript coded slideshow. Everything seems to work. However, what's happening is that I can go "previous" but I have to press twice to get it to work:

    Here is my code:

    Code:
    var index = 0;
    var img;
    var slideName;
    function moveToNextSlide() {
    	img = document.getElementById("img1");
    	slideName = "images/slide" + ++index + ".png";
    	img.src = slideName;
    	if (index == 3) {
    		index = 0;
    	}
    
    }
    
    function moveToPreviousSlide() {
    	if (index == 0) {
    		index = 3;
    	}
    	slideName = "images/slide" + index-- + ".png";
    	img.src = slideName;
    }
    More Info:
    I am experimenting this with 3 images.
    Thanks In Advance..

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    moveToPreviousSlide shouldn't work at all, I don't think.. you don't have img = document.getElementById("img1"); in it.

    You have slide0.png through slide2.png?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    moveToPreviousSlide shouldn't work at all, I don't think.. you don't have img = document.getElementById("img1"); in it.

    You have slide0.png through slide2.png?
    Hey, Thanks for input..

    moveToPreviousSlide is working. I have made 'img' a global variable.

    The slide names are slide1.png through slide3.png

    Thanks

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Is it working, now? I think the math MIGHT be off.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by WolfShade View Post
    Is it working, now? I think the math MIGHT be off.
    Hey, It wasn't working at the point you asked...

    Here is the working code, for anyone in future looking at this post:
    Code:
    var index = 0;
    var img;
    var slideName;
    function moveToNextSlide() {
    	img = document.getElementById("img1");
    	if (index == 3) {
    		index = 0;
    		slideName = "images/slide" + index + ".png";
    	}
    	slideName = "images/slide" + ++index + ".png";
    	img.src = slideName;
    }
    
    function moveToPreviousSlide() {
    	slideName = "images/slide" + --index + ".png";
    	if (index == 0) {
    		index = 3;
    		slideName = "images/slide" + index + ".png";
    	}
    	img.src = slideName;
    }
    Last edited by Vrutin; 12-08-2012 at 12:26 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    That works, but it really kind of much bigger and uglier than needed.

    Try something like this:
    Code:
    var MINSLIDE = 0;
    var MAXSLIDE = 2; // adjust those as needed
    
    var curSlide = MINSLIDE;
    
    function moveSlide( byWhat )
    {
        curSlide += byWhat;
        if ( curSlide  > MAXSLIDE ) { curSlide = MINSLIDE; }
        else if ( curSlide < MINSLIDE ) { curslide = MAXSLIDE; }
        document.getElementById("img1") = "images/slide" + curSlide + ".png";
    }
    And now, instead of calling moveToNextSlide() or moveToPreviousSlide() you call moveSlide(1) and moveSlide(-1).

    And the beauty of this is that you can even call moveSlide(0) to start everything up with the first slide.

    Oh...and this works whether the slides are number 0 through N or 1 through N. Or even 73 through 122, for that matter.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •