Q:

looping through images from a path based on thumbnail

I have a div which holds image thumbnails, and another div that loads the original images based on the thumbnail path. even thou this works. My question is, how can i get the image to slide from the last click and continue in sequence at the same time. and when the page refresh to continue from that random number. I know my code is a little messy but i'm a beginner.
html
<div id="thumbs">
     <img src="/path/img.jpg" class="img" id="img1"/>
     <img scr="/path/water.jpg" class="img" id="img2" />
</div>

<div id="slide">

</div>

jquery
function imgfun(icount){

var getimg = $("#img"+icount).attr('src');
$('#slide').html('<img src="'+getimg+'">').fadeIn("slow");

};

var icount = $("#thumbs img").size(); //total imgs found in this div

//show random image on page refresh
var r = Math.floor((Math.random()*icount)+1); 
imgfun(r);

$('.img').click(function(){
    var src = $(this).attr('src');
    var id = $(this).attr('id').substring(3, $(this).attr('id').length);

 var i = '<img src="'+src+'" class="vimg"/>';

     $('#slide').html(i);
     imgfun(id);
    });

var auto_refresh = setInterval(
function()
{
var r = Math.floor((Math.random()*icount)+1); 
imgfun(r);
}, 4000);
});

A:

One solution would be to create three classes, "previous", "active" and "next" and absolutely position those classes so that "previous" is off the screen to the left, "current" is displayed on screen and "next" is off the screen to the right. You can use CSS3 to animate their positions and JS to switch out their classes depending on what is the active image. 
Therefore when your slideshow loops through the user will see the "previous" image transitioning to the "current" position on screen from left to right, and the "current" image to the "next" position off the screen. 

