Revision: 22677
Updated Code
at January 19, 2010 07:33 by lwcooper
Updated Code
$('#carouselNav li:first-child').addClass('on'); var onAnimationComplete = function() { animating = false; } var timelineItemWidth = $('#carousel ul > li').outerWidth(); $("#carouselNav > li a").each(function(i) { var id = i; $(this).click(function() { $('#carousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false); $('#carouselNav > li').removeClass('on'); $(this).parent('li').addClass('on'); return false; }); }); // Auto scrolling var carouselInterval = 5000; function carouselSlide(){ if( $('#carouselNav li:last-child').hasClass("on") ) { $('#carouselNav li:last-child').removeClass('on'); $('#carouselNav li:first-child').addClass('on'); $('#carousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false); } else { $('#carouselNav li.on').next('li').children('a').click(); } } // Pause Auto scrolling on carousel hover var carouselScroll = setInterval(carouselSlide,carouselInterval); $('#carousel').hover(function() { clearInterval(carouselScroll); }, function() { carouselScroll = setInterval(carouselSlide,carouselInterval); carouselSlide(); });
Revision: 22676
Updated Code
at January 19, 2010 07:31 by lwcooper
Updated Code
$('#carouselNav li:first-child').addClass('on'); var onAnimationComplete = function() { animating = false; } var timelineItemWidth = $('#carousel ul > li').outerWidth(); $("#carouselNav > li a").each(function(i) { var id = i; $(this).click(function() { $('#carousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false); $('#carouselNav > li').removeClass('on'); $(this).parent('li').addClass('on'); return false; }); }); // Auto scrolling var carouselInterval = 5000; function carouselSlide(){ if( $('#carouselNav li:last-child').hasClass("on") ) { $('#carouselNav li:last-child').removeClass('on'); $('#carouselNav li:first-child').addClass('on'); $('#carousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false); } else { $('#carouselNav li.on').next('li').children('a').click(); } } var carouselScroll = setInterval(carouselSlide,carouselInterval); $('.homepage #content').hover(function() { clearInterval(carouselScroll); }, function() { carouselScroll = setInterval(carouselSlide,carouselInterval); carouselSlide(); });
Revision: 22675
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 19, 2010 07:30 by lwcooper
Initial Code
$('#homeCarouselNav li:first-child').addClass('on'); var onAnimationComplete = function() { animating = false; } var timelineItemWidth = $('#homeCarousel ul > li').outerWidth(); $("#homeCarouselNav > li a").each(function(i) { var id = i; $(this).click(function() { $('#homeCarousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false); $('#homeCarouselNav > li').removeClass('on'); $(this).parent('li').addClass('on'); return false; }); }); // Auto scrolling var carouselInterval = 5000; function carouselSlide(){ if( $('#homeCarouselNav li:last-child').hasClass("on") ) { $('#homeCarouselNav li:last-child').removeClass('on'); $('#homeCarouselNav li:first-child').addClass('on'); $('#homeCarousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false); } else { $('#homeCarouselNav li.on').next('li').children('a').click(); } } var carouselScroll = setInterval(carouselSlide,carouselInterval); $('.homepage #content').hover(function() { clearInterval(carouselScroll); }, function() { carouselScroll = setInterval(carouselSlide,carouselInterval); carouselSlide(); });
Initial URL
Initial Description
A simple auto rotating carousel with a link for each slide
Initial Title
Jquery carousel with auto rotate
Initial Tags
Initial Language
jQuery