A simple slideshow on jQuery.

After reading the jQuery topic, I immediately ran to order a book. I admit, I read with great interest. I really wanted to see what kind of animal it is, in practice. Fortunately, one of the developments for the viewsale.ru project turned up, and then a lot of work on the site. In the end, as it seems to me, it turned out well. I want to share how to make a light slideshow.

Having looked on Habré, I found some solution . It turned out to place only the 3rd block of 12 pictures in each. More and not needed, because The browser did not stand. Started to brake and take off.

As a result, it was necessary to urgently solve the problem. The answer was found pretty quickly, thanks to the Isis article .

How it works?

')
An example will be considered for one block only. We need the jQuery library and jQuery Timers .

Create an array with images:

imgArray1 = new Array();
imgArray1[0]= '1.jpg' ;
...
imgArray1[n]= 'n.jpg' ;


Next, we write the process of changing slides:

jQuery( function (){
var countArray1 = imgArray1.length; //
var countArray1V = 0;
jQuery( "img#slideShow1" ).everyTime(3000, function (i) { // #slideShow1 3
countArray1V++;
if (countArray1V > (countArray1-1))countArray1V=0;
jQuery( "img#slideShow1" ).fadeIn(2000).attr( "src" ,imgArray1[countArray1V]); //
});
});


Our block in the video of one picture. Preload the preloader there:

< img src ='/img/35.gif' id ='slideShow1' alt ='' />

What's happening?
The timer starts, along with it the countArray1V variable increases. Further, if the value of countArray1V has reached the value of the length of the array countArray1, then we equate countArray1V to 0. Then the process repeats.

Everything turned out to be very simple. See an example . For the speed test I decided to display 100 such blocks on one page. It works quite well.

Thanks for attention. I hope the material was useful.