0

目前，我正在为我的网站上的列表设置自动滚动功能。

但是，在列表中的第一项消失后，第二项是第一项的“跳入位置”。我想知道是否可以让第二个项目滑入 jquery 中的位置，我该怎么做？以下是javascript代码和html。感谢您提前提供任何帮助。

Javascript：

    <script>
    var $target=$("tr.latest_arr td.rotate:first");
    $target.animate({
        marginLeft: -200,
        opacity: 0,
    }, function(){
        $target.css({
            marginLeft: 200
        }).appendTo('tr.latest_arr').animate({
            marginLeft: 0,
            opacity: 1
        })
    });
},5000);
    </script>

生成的 HTML（示例）：

 <table>  
    <tr class="latest_arr">
       <td class="rotate" style="float:left;width:200px">Item 1</td>
       <td class="rotate" style="float:left;width:200px">Item 2</td>
       <td class="rotate" style="float:left;width:200px">Item 3</td>
       <td class="rotate" style="float:left;width:200px">Item 4</td>
       <td class="rotate" style="float:left;width:200px">Item 5</td>
            ...
            ...
            ...
    </tr>
 </table>

我可以为列表执行此操作，但是当我将标签切换为表格元素时它会发生变化。

这就是我现在面临的：

http://jsfiddle.net/fxHAe/

这就是我正在寻找的，但以表格形式：

http://jsbin.com/welcome/53677

任何帮助将不胜感激。谢谢。

4

1 回答 1

0

结果是预期的！，我会这样做

    var ad_refresh=setInterval(function(){
    var $target=$("ul.latest_arr li.rotate:first");
    $target.animate({
        marginLeft: -200,
        opacity: 0,
    }, function(){
        $target.css({
            marginLeft: 200
        }).appendTo('ul.latest_arr').animate({
            marginLeft: 0,
            opacity: 1
        })
    });
},1000);​

<ul class="latest_arr">
    <li class="rotate">foo1</li>
    <li class="rotate">foo2</li>
    <li class="rotate">foo3</li>
    <li class="rotate">foo4</li>
    <li class="rotate">foo5</li>
</ul>

        <style type="text/css">
         li{float:left}
        </style>​

这里的结果 当然，根据需要更改 ul css 宽度会更适合您的情况

于 2012-12-30T11:19:18.547 回答