Скачать или смотреть JQuery Cross Fade Tutorial Last to First Image

This is the fifth step in this tutorial on how to do cross fade images using JQuery in a web page.

In our last step we were only able to cross fade our images one time through.

Now we want to work on starting back at the first image and repeat the sequence.

We are using the JQuery next method to select the fade over img element.

That worked until we faded to the last img element.

To help fix that we are going to look at the JQuery object length property.

We will use it to signal when we need to select the first img element.

And to do that we will use the JQuery selection filter called first.

Finally we will use the JQuery show method on the faded out img element.

Source files: http://bit.ly/1q9f399 See readme.txt if you want to follow along.

This is part of a 10 part tutorial series to learn how to cross dissolve images, also called cross fade, in a web page and at the same time learn more about using JQuery in combination with HTML, CSS and Javascript. Designed for beginners looking to learn from practical examples. The final example is reusable in other web pages.

The HTML tags for the cross fade effect are designed so they would be independent of the demo web page. This way you can reuse the completed version in your other web pages and style as you like.

For CSS you learn to configure the position static, position absolute, position releative and z-index properties to stack images at the same location.

You will use JQuery fadeOut, JQuery next, JQuery addClass, JQuery removeClass, JQuery css, JQuery prop, JQuery show, JQuery length and JQuery first filter.

Just standard Javascript core programming skills including variables and control structures are used so it is easy to follow.

The example is built from the ground up with a mimimal starting code. This way there is no complicated starting set of code to wrap your head around before you can comfortably follow along.

The steps start with the HTML, add the CSS and then the Javascript and JQuery are added.