SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Novice to Ninja: Understanding math for crossfade slideshow

    I'm having some difficulty understanding the math behind the crossfade slideshow on page 114.

    If anyone can explain how this math works please let me know.

    Thanks

    Code:
    $(document).ready(function(){
    	rotatePics(0);
    });
    
    function rotatePics(currentPhoto) {
      var numberOfPhotos = $('#photos img').length;
      currentPhoto = currentPhoto % numberOfPhotos;
    	
    	$('#photos img').eq(currentPhoto).fadeOut(function() {
    		// re-order the z-index
    		$('#photos img').each(function(i) {
          		$(this).css(
            		'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
          		);
        	});
    
    		$(this).show();
      		setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
    	});
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Jack, I haven't done this yet but I think the concept is to stack the images then use the z-index in your css file to change which image is on top of the stack. It fades in every 4 seconds
    HTML Code:
    (4000)
    Is this what you mean. I'm a little confused as to what you are asking.


Bookmarks

Posting Permissions

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