帮助动画制作

Question

帮助动画制作

4

我使用了“FeatureList” Jquery插件制作了自己的内容滑块。

脚本可以在这里找到：http://pastebin.com/7iyE5ADu 以下是一个示例图像，显示我想要实现的内容：http://i41.tinypic.com/6jkeq1.jpg 实际上，滑块会向一个项目（例如方块1、2和3）添加“current”类，并为每个缩略图在主区域中显示内容。

在此示例中，脚本每2秒从1切换到2，从2切换到3，以此类推。

我想制作一个连续的缩略图动画，有谁能帮我？

- Pennywise83

你看到我的更新代码了吗！它支持多个项目！;-) - Luca Filosofi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luca Filosofi · Accepted Answer

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);
});
}