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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2017
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Basic looping images

    Hi all,

    I'm having some trouble with creating a basic loop for image swaps (still somewhat new to this).

    What I am trying to do is have a div overlay that fades away (this works) to reveal the first image for a few seconds.
    Then the image should fade out and fade in to the next image in the array.

    This is the code I have and it just isn't working:

    Code:
    var img = new Array;
    img[0] = "Front images/0.jpg";
    img[1] = "Front images/1.jpg";
    img[2] = "Front images/2.jpg";
    img[3] = "Front images/3.jpg";
    img[4] = "Front images/4.jpg";
    img[5] = "Front images/5.jpg";
    
    var i = 0;
    
    $(document).ready(function(){
    	$("#divload").delay(1000).fadeTo(2000, 0);
    	setTimeout(function(){
    		$("#divload").css("z-index", "-3");
    	}, 3000);
    	setTimeout(fadeDivs(), 1000);
    	setInterval(fadeDivs(), 2000);
    });
    
    function fadeDivs(){
    	$("#Slides1").fadeOut(3000, function() {
    		$("#Slides1").attr('src', img[i]);
    		$("#Slides1").fadeIn(3000, function() {
    			if (i == img.length-1){
    				i=0;
    			}
    			else {
    				i++;
    			}
    		});
    	});
    }

  2. #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    247
    Thanks
    4
    Thanked 43 Times in 43 Posts


 

Tags for this Thread

Posting Permissions

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