Question

我有一个包含6个部分的html。将始终显示第一个和第二个部分。从3到6的部分必须一个接一个地显示。意味着第三部分将在页面中显示3秒钟，之后它应该淡出，第四部分将显示3秒，像这样它应该一直到第六部分。在我的小提琴中，第三，第四，第五和第六个总是显示..我想第三个显示3秒，然后它应该消失，第四个应该出现，然后第五个，依此类推。因此我需要在3秒后隐藏并显示这些li，即使它击中最后一个li也不应该停止。它应该继续下去有人可以帮我吗？我用html结构为此创建了一个示例小提琴 http://jsfiddle.net/Ha4CS/5/

CODE

<li>
    <h4>1. First section.</h4>
    <div>
        <p>Contents for the first li.Contents for the first li.Contents for the first li.Contents for the first li.</p>
        <a href="#" >Go</a>     
    </div>
</li>

Answer 1

这是代码

<div class="product_box">
<ul id="products">
    <li>
        <h3>Title 1</h3>
        <a id="button" href="#" target="_blank">Info</a>
    </li>
    <li>
        <h3>Title 2</h3>
       <a id="button" href = "#" target="_blank">Info</a>
    </li>
    <li>
        <h3>Title 3</h3>
        <a id="button" href = "#" target="_blank">Info</a>
    </li>
</ul>
</div>

脚本：

$(document).ready(function($) {
    setInterval(function() {
         var firstLi = $('#products li').first().detach();
        $('#products').append($(firstLi));
     }, 500);

});

Css：

li {
    margin: 5px;
    padding: 5px;
    border: 1px solid lightgray;
    display: none;
    width: 60px;
}

li:first-child {
display: block;            
}

h3 {
    display: inline-block;
}

Demo

Answer 2

我们通过多种方式实现。我在setInterval()

尝试过

试试这段代码：

Fiddle

<强> JS ：

     var i=1;  
     var set= setInterval(function() {
          if(i<5)
           {
             $("#list").html($("#list"+i).clone().fadeIn());

            }
          else
          {
              i=1;
               $("#list").html($("#list"+i).clone().fadeIn());

          }
       i++;
       },3000);
     set();

以特定时间间隔隐藏和显示li

2 个答案: