Jquery循环时间相对于表中数据量的变化

时间:2013-10-21 08:49:33

标签: jquery html html-table cycle

考虑像

这样的表格
<div class='Textslideshow'>
<table width='600px' style='padding-left:0%;' border='1'>
    <tr>
        <td width='100%' align='center' valign='middle' style="font-family: Arial">Header1</td>
        <tr>
            <td width='100%' align='center' valign='middle' style="font-family:Arial">
                <table border='1' cellpadding='3' cellspacing='7'>
                    <tr>
                        <td width='50%' align='center'>Time1</td>
                        <td width='50%' align='center'>Label1</td>
                    </tr>
                    <tr>
                        <td width='50%' align='center'>Time2</td>
                        <td width='50%' align='center'>Label2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tr>
</table>
<table width='600px' style='padding-left:0%;' border='1'>
        <tr>
            <td width='100%' align='center' valign='middle' style="font-family: Arial">Header2</td>
            <tr>
                <td width='100%' align='center' valign='middle' style="font-family:Arial">
                    <table border='1' cellpadding='3' cellspacing='7'>
                        <tr>
                            <td width='50%' align='center'>Time1</td>
                            <td width='50%' align='center'>Label1</td>
                        </tr>
                        <tr>
                            <td width='50%' align='center'>Time2</td>
                            <td width='50%' align='center'>Label2</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tr>
</table>

在这个div下,有这样的几个表,我以5秒的特定速度使用Jquery循环遍历每个表。现在,html页面只能显示10个时间和标签条目。如果有超过10个条目,我需要将时间分为2.5秒(1-10秒)和10+(其他2.5秒)。其余表格通常显示5秒钟。相应的Jquery是textspeed为5000的地方。

$(window).load(function () {

    $('.Textslideshow').cycle({
        fx: textTransitionEffect,
        speed: textSpeed,
        timeout: textTimeout
    });
});

此代码适用于具有1-10(时间和标签)条目的表格。如果您有更多条目,则条目将附加到表中。但是我需要拆分表(条目超过10个)并且每个显示2.5秒。 jsFiddle链接jsFiddle

对此有任何建议。

1 个答案:

答案 0 :(得分:0)

我使用以下代码

完成了这项工作
$('#MovieDisplayTiming').append(opthtml);
                    $('#MovieDisplayTiming div').css('width', $('#MovieDisplayTiming').width());
                    $('#MovieDisplayTiming').cycle({
                        fx: 'fade',
                        after: function () { $('.fillingfast').blink(1000); },
                        speed: 2000,
                        timeout: 8000,
                        before: function (curElement, nextElement, options, forwardFlag) {
                            if ($('.DisplayIndividualTiming').length !== 0) {
                                $('.DisplayIndividualTiming').cycle({
                                    fx: 'scrollUp',
                                    speed: 'slow',
                                    timeout: 4000,
                                    autostop: true
                                });
                            }
                        }
                    });