0

私は、各liをウォークスルーし、遅れてテーマを1つずつ表示するRotatorを構築しようとしています。私は次のhtml構造をphpスニペットと混合しています

<div class="product_box">
<ul id=products>
<?php foreach ($products as $product):?>
    <li>
        <h3><?php echo $product->name ?></h3>
        <a class= "images" target ="_blank" title="<?php echo $product->name ?>" href ="<?php echo $product->link ?>" >
            <img alt="" src="/img/produkte/<?php echo $product->img ?>">
        </a>
        <a id="button" href = "<?php echo $product->link ?>" target="_blank">Info</a>

    </li>
<?php endforeach;?>
</ul>
</div>

そして私はjqueryを構築し始めていました

<script>

jQuery(document).ready(function($) {
    var totalImages = $("#products > li").length;
    setTimeout(function() {
         $('li:first').fadeIn().next() 
         }, 500);

    });

</script>

問題は、次のliを表示して前のliを非表示にする方法がわからないことです。

4

2 に答える 2

2

最初のリスト項目を切り離し、それを追加して終了するだけで、簡単に解決できます。ここで簡単な例を作成しました：デモ

$(document).ready(function($) {
    setInterval(function() {
        var firstLi = $('#products li').first().detach(); // Remove the first element
        $('#products').append($(firstLi)); // Add it back to the end
    }, 500);
});​
于 2012-10-22T13:05:58.803 に答える
0

これが実用的なフィドルです：http：//jsfiddle.net/ranjith19/RgKV9/7/

jQuery(document).ready(function($) {
        var totalImages = $("#products > li").length;
        var i = 0
        function li_fader(){
            if (i==totalImages){
                return
            }
            elements = $("#products > li")
            $(elements).fadeOut()
            setTimeout(function() {
                ele = elements[i]
                $(ele).fadeIn()
                i = i + 1
                li_fader()
            }, 500);

        }
        li_fader()​;
    })

私は再帰を使用しましたが、グローバル変数を使用しました。コードはそれ自体を呼び出すだけで、iの値に応じて実行を停止します

于 2012-10-22T13:07:29.103 に答える