$(document).ready(function() { $("#panel").show(); $("#panel a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $("#panel a").removeClass('active'); $active.addClass('active'); $(".image_reel").animate({ left: -image_reelPosition }, 1500 ); }; rotateSwitch = function(){ play = setInterval(function(){ $active = $('#panel a.active').next(); if ( $active.length === 0) { $active = $('#panel a:first'); } rotate(); }, 7000); }; rotateSwitch(); $(".image_reel a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $("#panel a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); });