我的 jsp 文件中有图像列表,我想通过分页一次显示 5 个图像。如何使用 jquery 来做到这一点?
提前致谢
我做了一个快速演示,jsFiddle.
上一个和下一个链接是可选的。
如果需要,只需更改“var start = 0”即可。
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();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)