Moving Panes JavaScript Slideshow
This time we need to make the size of the images identical so that the "bottom" slide doesn't show through if the "top" slide is smaller. The major difference here is that the slides move out of the visible area of the parent bounding <DIV> in order to reveal the next slide "underneath". During the transition, the code swaps the z-index setting of the slides so that the newly-revealed slide is moved to the "top" layer and the image of the previous slide is changed to the next in sequence. The process then repeats.
And since we're discussing CSS here, you'll note that no <table>s are used to display the slideshow here. The slideshow is contained in a floated <DIV>. Let me also emphasize again that the display of the variables is optional and included here only to help you see how the JavaScript works.
With a little ambition, you could modify this code so that the slides scroll right and down as well as left and up as they do now. You could even make them move both vertically and horizontally at the same time to shake things up a bit. It's up to you.
Return to Main Slideshow page where you can download the complete slideshow package.
Click here to return to the Rainbo Design Tools and Scripts menu.
This page Copyright (C) 2003-2009 by Richard L. Trethewey. All rights reserved.
