2

「x」個のリスト項目を保持する順序付けられていないリストがあります。これらのリスト アイテムは表示されますが、一度に表示できるのは 'n' 個だけです。次に、次と前を追加して、前のコンテンツをスライドさせ、新しい「n」個のリスト項目をスライドさせます。

しかし、私が持っているものは、ページネーターとしてだけでなく、コンテンツ スライダーとしても機能します。

jsフィドル

HTML

<ul>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
  <li><span class="box"></span></li>
</ul>
<a href="" id="prev">Prev</a>
<a href="" id="next">Next</a>

CSS

body {
  margin: 5px;
}
ul {
  overflow: hidden;
}
li {
  float: left;
}
.box {
  width: 100px;
  height: 100px;
  background: #33cccc;
  margin: 5px;
  display: block;
}

JS

var from = 0, step = 3;

// show show next function
function showNext(list) {
  list
    .find('li').hide().end()
    .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
      .show();
  from += step;
}
// show previous function
function showPrevious(list) {
  from -= step;
  list
    .find('li').hide().end()
    .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
      .show();
}

// show initial set
showNext($('ul'));

// clicking on the 'more' link:
$('#more').click(function(e) {
  e.preventDefault();
  showNext($('ul'));
});

// clicking on the 'prev' link:
$('#prev').click(function(e) {
  e.preventDefault();
  showPrevious($('ul'));
});
4

1 に答える 1

4

私の理解が正しければ、横から次/前のアイテムをスライドさせたいと思うでしょう。

すべてのアイテムで長いブロックを作成し、その周りに固定サイズのラッパー ブロックを作成する必要がありますoverflow:hidden。そして、内側のブロック（position:relative;left:-...px;）またはラッパースクロールの位置をアニメーション化します https://jsfiddle.net/uXn2p/1/

于 2013-01-12T00:34:50.100 に答える