Question

有图像分页示例。一切都很好，但是当我到达分页末尾时，它又重新开始（再次从第一个图像开始）。如何停止对最后一张图像的分页。

HTML：

<div class="img-list">
<img src="" alt="1" />
<img src="" alt="2" />
<img src="" alt="3" />
<img src="" alt="4" />
<img src="" alt="5" />
<img src="" alt="6" />
<img src="" alt="7" />
<img src="" alt="8" />
<img src="" alt="9" />
<img src="" alt="10" />
<img src="" alt="11" />
<img src="" alt="12" />
<img src="" alt="13" />
<img src="" alt="14" />
<img src="" alt="15" />
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

jQuery：

var start = 0;
var nb = 5;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

if( $(this).hasClass('prev') ){
  start -= nb;
} else {
   start += nb;
}

if( start < 0 || start >= length ) start = 0;
end = start + nb;       

if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});

Answer 1

您可以设置一个标志来观察末尾。对我来说这是工作。尝试一下。

var start = 0;
var last_end = 0;
var nb = 5;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt(' + (end) + ')').show();

$('.prev, .next').click(function (e) {
    e.preventDefault();

    if ($(this).hasClass('prev')) {
        start -= nb;
        last_end -= nb;
    } else {
        start += nb;
    }

    if (start < 0 || start >= length) start = 0;
    end = start + nb;

    if (last_end == length) {
        start = length - nb
        end = length
    }

    if (start == 0) list.hide().filter(':lt(' + (end) + ')').show();
    else list.hide().filter(':lt(' + (end) + '):gt(' + (start - 1) + ')').show();

    if (end == length) {
        last_end = end
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tag-wrapper">
    <div class="img-list">
        <img src="" alt="1" />
        <img src="" alt="2" />
        <img src="" alt="3" />
        <img src="" alt="4" />
        <img src="" alt="5" />
        <img src="" alt="6" />
        <img src="" alt="7" />
        <img src="" alt="8" />
        <img src="" alt="9" />
        <img src="" alt="10" />
        <img src="" alt="11" />
        <img src="" alt="12" />
        <img src="" alt="13" />
        <img src="" alt="14" />
        <img src="" alt="15" />
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
</div>

Answer 2

var start = 0;
var nb = 5;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

if( $(this).hasClass('prev') ){
  start -= nb;
} else {
  if(start!=10) //add this line
   start += nb;
}

if( start < 0 || start >= length ) start = 0;
end = start + nb;       

if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-list">
<img src="" alt="1" />
<img src="" alt="2" />
<img src="" alt="3" />
<img src="" alt="4" />
<img src="" alt="5" />
<img src="" alt="6" />
<img src="" alt="7" />
<img src="" alt="8" />
<img src="" alt="9" />
<img src="" alt="10" />
<img src="" alt="11" />
<img src="" alt="12" />
<img src="" alt="13" />
<img src="" alt="14" />
<img src="" alt="15" />
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

尝试一下... 添加此行if(start!=10)

var start = 0;
var nb = 5;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

if( $(this).hasClass('prev') ){
  start -= nb;
} else {
  if(start!=10) //add this line
   start += nb;
}

if( start < 0 || start >= length ) start = 0;
end = start + nb;       

if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});

如何停止最后一张图像上的分页

2 个答案: