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

Thread: Slideshow Help

  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow Help

    Code:
    var mySlideShow = document.getElementById("slideShow");
    
    var imageArray=new Array(); 
    imageArray[0]="url(images/Slide1.JPG)";       
    imageArray[1]="url(images/Slide2.JPG)";
    imageArray[2]="url(images/Slide3.JPG)";
    
    
    var imageIndex = 0;
    
    var leftArrow = document.getElementById("left");
    var rightArrow = document.getElementById("right");
    
    mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
    
    
    function changeRight  () {
    
    mySlideShow.style.backgroundImage = imageArray[imageIndex];
    imageIndex++;
    
    
    	if (imageIndex >= imageArray.length) {
    	imageIndex = 1;
    
    
    	
    	}
    	
    	console.log(imageIndex);
    	
    }
    
    
    function changeLeft  () {
    
    mySlideShow.style.backgroundImage = imageArray[imageIndex];
    imageIndex--;
    console.log(imageIndex);
    	
    }
    
    
    
    
    rightArrow.onclick = function() {
    	
    	changeRight();
    	
    	}
    	
    leftArrow.onclick = function() {
    	
    	changeLeft();
    	
    }


    So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work.

    Any help would be awesome.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your 'right' function sets the image using the current value of imageIndex, suggesting that it won't do anything the first time it is used. Also it should set imageIndex to 0 on overflow not 1. The 'left' function makes no attempt to check for underflow. You should change ( and if necessary reset ) the value of imageIndex before setting the image.

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the right function how do I set the current image to suggest that it would be doing something the first time it is used?

    How do I check for underflow?

    What do you mean by reset the value before setting the image?

    Sorry I am new to programming in general so I hope you can bare with me.


  •  

    LinkBacks (?)


    Posting Permissions

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