Image cross fade slide show slider using javascript and jquery with previous, next and pagination clicks

<div class="contents" style="width:460px;  margin:0px auto; overflow:hidden;">
<div id="slides" class="slidepart fl">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
<div class="sl_paginationpart">
	<ul id="slidenum" class="slpagination">
		<li><a href="javascript: slideit(0, null);" class="prev"></a></li>
		<li><a href="javascript: slideit(null, 0)" class="number select">1</a></li>
		<li><a href="javascript: slideit(null, 1)" class="number ">2</a></li>
		<li><a href="javascript: slideit(null, 2)" class="number ">3</a></li>
		<li><a href="javascript: slideit(null, 3)" class="number ">4</a></li>
		<li><a href="javascript: slideit(null, 4)" class="number ">5</a></li>
		<li><a href="javascript: slideit(1, null);" class="next"></a></li>
	</ul>            	
	</div>
</div>
</div>

The above html code has two div's one is slides and another is slidesnum. slides contains all the images(img tags) without spaces. slidenum contains 7 li elements. 2 for next and previous and then rest are pagination numbers. If you have displayed 5 images then there should be 5 li elements between the li for previous and li for next. so you have to iterate the numbering li's between li's for left and right. The slideit functions argument starts from zero. So if you have 5 images then you have to give it like slideit(0) to slideit(4). You can change the styles in style.css so that you can change the background image for next previous and the pagination numbering.

<script type="text/javascript">
var slides, slideNum, prev, cur, timi;
prev = cur = timi = 0;

$(document).ready(function() {
	slides = document.getElementById('slides').getElementsByTagName('img')
	slideNum = document.getElementById('slidenum').getElementsByClassName('number');
	slideit(null, 0);
})

function slideit(mode, who)
{
	window.clearTimeout(timi);
	
	if(mode != null) {
		prev = (mode ? cur++ : cur-- ) % 5;
		cur %= 5;	
		if(cur < 0) cur = 4;	
	}
	else 
		cur = who

	if(cur != prev)$(slides[prev]).fadeOut(500);	
	$(slides[cur]).fadeIn(500);
	slideNum[prev].className = 'number'		
	slideNum[cur].className = 'number select'

	prev=cur	
	timi = window.setTimeout('slideit(1,null)',2000)		
}

As you can see i have collected all the img elements(objects) in an array named slides and the collection of all the LI tags(which holds the numbers 1 to 5) in an array slide num. getElementsByTagName and getElementsByClassName methods return an array of object references. The objects are nothing but the html elements. And then i start the slide show by calling the function slideit(null, 0).

The first line in slideit is the clearTimeout. As setTimeout is used to slideshow the images we need to use clearTimeout to clear any pending timers before manipulating the images. Else, calling setTimeout multiple times without clearTimeout(by pressing buttons rapidly in less than 2 seconds) will give you undesirable and unexpected results. I have explained the side effects in the below paragraph. Now let us see how prev and next are maintained. The variable cur will hold the current image number on screen. At the start of the script it will be 0. If its 0 then image1 will be the current image on screen. If its 1 then image2 is the current image on screen and so on. All the images are maintained in an array named slides. If there are 5 images then slides[0] will point to the first image. That is the reason cur is 0 initially. When ever there is a click on previous button or the next button the var cur is incremented or decremented respectively. If prev button is clicked then cur-- and if next button is clicked then cur++. If the numbered button is clicked then cur will be assigned with that number. When we do ++ and -- on cur if it goes more than 4 then it is made 0 and if it goes less than 0 then it is made 4.

The if condition in line 15 is to check whether the click is from the prev/next button or from the numbered buttons. If it is from the numbered buttons then the else part will execute(line 21). If the click is from the prev/next button then the if part(line 15) will execute in which there is again a condition to check whether the click is from the prev button or from the next button(line 16). According to that cur is incremented or decremented. Since we fadein the clicked image and fadeout the image which is already in screen we need to maintain a var prev. At any next click the current image on screen will become prev and the clicked image(imageN) will become the cur. I leave it to you to experiment the usage of the modulous operator(the divider symbol) and to see why only for decrement the cur < 0 condition is made and not for increment. And then we have a value in prev and in cur. With that we fade in the image[cur] and fadeout the image[prev]. The reason for using classNames in the next two lines is just to change the style of the clicked buttons and other buttons.

The timer calls the slideit function every 2 seconds. This happens if you had not clicked any buttons. It calls the funtion as if the next button is clicked. like slidit(null, 0). So, the slideit function is called either on button clicks and when the timer ticks. To distingush whether the click is from prev/next or numbered buttons the null parameter is used. if the first param is null then the call is from the prev/next. in this if the second param is 0 then the click is from the prev button else if the the second param is 1 then the click is from the next button. if the first param is a number and the second param is null then the click is from the numbered buttons. when the timer calls the slideit function it is called as is the next button is clicked. Phew, Just thought of explaining extensively.

If you are aware of the usage of setting timeouts and clearing it then you can skip the following paragraph.
When the slideit function is called the first line to execute is the clearTimeout. As we are calling the slideit function for previous, next and number clicks we need to clear the timer before cross fade and then start it again. The reason is here. Assume that the current image is 3 and the next image will load in 2 seconds. Assume that we did not use clearTimeout and the timer has elapsed 1.5 seconds. 0.5 seconds remaining for the next image to load. At this moment you are clicking next or previous or any number buttons. Assume you have clicked button 1 and the image(image1) w.r.t to button1 will load. But the time available for this image(image1) to be there in the screen before next image loads is .5 seconds. As soon as image1 appears the next image(image2) will load. Because, the timer will execute the function for every 2 seconds irrespective to your button clicks. That is how we want this as it is an automatic image cross fader. To prevent that the clearTimeout function is used. When clearTimeout is in use and whenever you click previous or next or any number then then timer will reset to zero. Now let us get into the same situation as above with clearTimeout at line number 13 in code. You click a number say 1 at 1.5secs. The slideit function is called. clearTimeout is executed. Now the timer is reset to zero. As you had clicked number 1 the image1 is loaded. Since the timer is counting from zero the current image(image1) will have 2 seconds before it gets fade away.

Above all there is another issue which should be noted. Each time you call setTimeout without using clearTimeout the slideit function will be called that many times after 2 seconds. Assume that you have clicked randomly for 5 to 10 times in less than 2 seconds on different buttons. Assume you had made 7 clicks in less than 2 seconds. For each click the image would have cross faded immediately. With that 7 instances of the timer is created. So, after 2 seconds you can see the images changing again for 7 more times which is not desirable. So, always use setTimeout and setInterval wisely with clearTimeouts and clearIntervals. If you use clearTimeout then there cannot be any timers for more than one instance. Because, you by using clearTimeout any previous timer is removed. If my explanation is not making you understand then experiment it yourself like in the above to understand it.