Simplest slider

markup.html

<div class="slideshow">
	<div class="slide-1">
		<div class ="fr frame1"></div>
		<div class ="fr frame4"></div>
		<div class ="fr frame7"></div>
	</div>
	<div class="slide-2">
		<div class ="fr frame2"></div>
		<div class ="fr frame5"></div>
		<div class ="fr frame8"></div>
	</div>
	<div class="slide-3">
		<div class ="fr frame3"></div>
		<div class ="fr frame6"></div>
		<div class ="fr frame9"></div>
	</div>
</div>

slider.js

(function($){
	var $slideshow = $(".slideshow div[class*='slide-']");

	$slideshow.each(function (index, element) {
		var $this = $(this);
        
        // hide all slides except first
	    $this.find('div.fr:gt(0)').hide();
		
        // 2 sec. delay for next slot
	    setTimeout(function () {
            // every 6 sec.
			setInterval(function () {
                // fadout first slide, fade in next, clear filtering (back to first-child), move first to the end
				$this.find(':first-child').fadeOut().next('div.fr').fadeIn().end().appendTo($this);
			}, 6000);
		}, index*2000);
	});
		
})(jQuery);