0

我正在尝试构建一个旋转器，它会在每个 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>

问题是我真的不知道如何显示下一个 li 并隐藏上一个。

4

2 回答 2

2

您可以通过分离第一个列表项然后将其附加到末尾来轻松解决它。我在这里做了一个简单的例子：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);
});​
于 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 回答