Question

我正在尝试构建一个旋转器，它将在每个li上行走，并且延迟将逐个显示主题。我有以下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>

问题在于我真的不知道如何展示下一个李并隐藏前一个。

Answer 1

只需分离第一个列表项然后将其追加即可轻松解决。我在这里做了一个简单的例子：Demo

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

Answer 2

这是一个工作小提琴：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的值，停止执行

用jquery一个一个地展示li

2 个答案: