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