Question

这是我的问题。也许我找不到好的逻辑，这也就是我在这里的原因。

所以，我想制作一个＆＃34;假卡鲁塞尔＆＃34;。

<ul>
  <li>
   <img src="" />
   <img src="" />
  </li>
  <li>
   <img src="" />
   <img src="" />
  </li>
</ul>

关键是：如何制作第一个li fadeOut然后淡出第二个li无限时间！我无法找到好的逻辑:( ...

Answer 1

所以你想在一段时间内显示li＃1，然后在无限的时间内显示li＃2？

如果是这样，请尝试以下方法：

ul = $('ul');
ul.children('li').hide();
ul.children('li:eq(0)').show();

setTimeout(function(){
    ul.children('li:eq(0)').hide();
    ul.children('li:eq(1)').show();
},2000);

Answer 2

所以你可以这样做：

ul li:first-child { display: block; }
ul li:last-child { display: none; }
ul.alt li:first-child { display: none; }
ul.alt li:last-child { display: block; }

然后在JS

setInterval(function(){
    $('ul').toggleClass('alt');
}, 300);

如何制作“假”旋转木马js

2 个答案: