Circular display of images in javascript

From Code Trash
Jump to: navigation, search

I am having some images which should be displayed one by one in a circular pattern.
I needed a simple calculation to do that with timer.
And added fadein and fadeout effect using jquery.

var im = "one,two,there,four".split(',');
var roto = jQuery.noConflict();
 
var ln = im.length
var cnt=0;
 
function doing()
{
	roto('#bd'+cnt).fadeIn(700);		
	roto('#bd'+ (cnt-1<0 ? ln-1 : cnt-1) ).fadeOut(700);							
	cnt = (++cnt)%ln;
}
setInterval('doing()',2000)


im is the variable which contains the id of div's which contains the images.
The images has been already displayed inside that div one by one with display none except for the first one for which the display is block.
For every 2 seconds the doing function is called which will increment the id.
That id is made visible and the previous id is made hidden.
The id's are fetched in a circular fashion using increment and modulus.

Onclick start new

When the user clicks on any thumbnail then the animation should start from that.

function startnew(id)
{
	clearInterval(timi)
 
	roto('#bd'+id).fadeIn(700);
	for(var i=0;i<ln;i++)
	{
		if(i==id)continue;
		document.getElementById('bd'+i).style.display = 'none'
	}
 
	window.cnt=id
	timi = null;
 
	timi = setInterval('doing()',3000)	
}

The id passed into startnew is the position or id of the image being animated which is called like onclick="startnew(1)".
here 1 is the second image and 0 for the first image.