0

現在、サイトのリストの自動スクロール機能を実行しています。

ただし、リストの最初のアイテムが消えた後、2 番目の 1 種類は最初のアイテムの「位置にジャンプ」します。2番目のアイテムを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 に答える