動畫幫助

Question

我已經使用「FeatureList」Jquery插件來創建我自己的內容滑塊。

該腳本可以在這裏找到：http://pastebin.com/7iyE5ADu

這裏是一個例證的圖像顯示什麼，我triyng實現：http://i41.tinypic.com/6jkeq1.jpg

其實滑塊添加一個「電流」類的項目（在例如正方形1,2和3）以及每個拇指在主區域中顯示內容。

在示例中，間隔2秒，腳本從1切換到2，從2切換到3等等。

我想製作一個連續的拇指動畫，任何人都可以幫助我？

Answer 1

• DEMO：http://aseptik.net/demo/help-with-animation

$(function() { 
    //go trought each LI 
    $('#tabs > li').each(function(i) { 
     // and Add incremental ID to each one... 
     $(this).attr('id', i + 1); 
    }); 
    //set interval... and call function 
    setInterval('swapImages()', 2000); 
}); 
function swapImages() { 
    var images = ['junku','codepoet','rappensuncle','nuomi','jam343','kk','ccgd','xdjio']; 
    //count all LI's 
    var total_lis = $('#tabs > li').size(); 
    // get the current LI ID based on where .current class... 
    var start_pos = parseInt($('#tabs li a.current').parent().attr('id')); 
    //remove the .current class for this LI... 
    $('li#' + start_pos).children().attr('class', ''); 
    //calculate next LI ID... 
    var next_pos = (start_pos < total_lis) ? start_pos + 1: 1; 
    //add .current class to the new LI 
    $('li#' + next_pos).children().attr('class', 'current'); 
    // monitor the position of current LI, if 3th OR multiple of the total do the magix... 
    if ((start_pos == 3) || (start_pos % total_lis == 0) || (next_pos == total_lis)) { 
     $('li#' + next_pos).prevAll().andSelf().attr('class', 'faded').fadeOut(200); 
     $('li#' + next_pos).nextAll('.faded').andSelf().attr('class', '').fadeIn(200); 
    } 
    //Append some stuff recursive... 
$('#output li').fadeOut(200,function() { 
    $(this).html('<img src="http://l.yimg.com/g/images/home_photo_' + images[next_pos] + '.jpg" />' + '<a href="#">See project details</a>').fadeIn(200); 
}); 
}