Question

在我的应用程序的主页上，我正在查看一次显示十个项目的列表。几秒钟后的项目将更改为列表中的下十个项目，依此类推。

我有这种工作，但我只能让它一次只能用于一件物品，而不能一次用于十件物品。

＆＃13;

var j = 0;
var inbetween = 2000; //milliseconds   
function page() {
  var jmax = $("ul#list li").length - 1;
  var count = 10;

  $("ul#list li:eq(" + j + ")")
    .animate({
      "opacity": "1"
    }, 400)
    .delay(inbetween)
    .animate({
      "opacity": "0"
    }, 400, function() {
      (j == jmax) ? j = 0: j++;
      page();
    });
};
page();

＆＃13;

 ul#list {
   width: 200px;
   border: solid;
   position: relative;
   overflow: hidden;
   height: 200px
 }
 ul#list li {
   font-size: 1.4em;
   padding: 20px;
   opacity: 0;
   position: absolute
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='list'>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eliven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
  <li>seventeen</li>
  <li>eighteen</li>
  <li>ninteen</li>
  <li>twenty</li>
</ul>

＆＃13;

帮助http://jsfiddle.net/6bbmkujn/

的jsFiddle

一切都会有所帮助！

Answer 1

我不确定position: absolute是否适合您。或多或少，您似乎想要选择列表项的旋转子集以在任何时间点显示。我想出了以下变化：

ul#list {
  width: 200px;
  border: solid;
  height: 200px
}
ul#list li {
  font-size: 1.4em;
  display: none;
  margin: 0; padding: 0;
}

以及相应的JavaScript：

var j = 1;
var inbetween = 2000; //milliseconds   
function page() {
  var jmax = $("ul#list li").length;
  var count = 10;

  var start = j;
  var end = j + count - 1;
  var complete = 0;
  console.log(j, start, end);

  var range = $('ul#list li:nth-child(n+'+ start + '):nth-child(-n+'+  end +')');
  range
    .show(400)
    .delay(inbetween)
    .hide(400, 'swing', function() {
      if (j++ >= jmax) {
        j = 1;
      }

      if (++complete >= count) {
        page();  
      }
    });
};
page();

您可以在此处查看示例：http://codepen.io/anon/pen/XJWpzK

唯一真正的变化是您可以看到我们正在使用j选择器选择一系列元素（基于nth-child）。希望这会有所帮助。

一次循环十个项目

1 个答案: