案例效果：
点击下面页码，选择对应页面的效果。点击向左向右的箭头，页面切到上一张或者下一张，当前页面是第一张时不能继续选择上一张，反之亦然。
实现代码如下： js：pageControl('#img-change')
// 切换消息页面
function pageControl(id){
// 箭头的展示
function arrowShow(){
if(currentIndex === pageLength - 1){
$('.i-prev').removeClass('disable')
$('.i-next').addClass('disable')
}else if(currentIndex === 0){
$('.i-prev').addClass('disable')
$('.i-next').removeClass('disable')
}else if(0< currentIndex < pageLength - 1){
$('.i-prev').removeClass('disable')
$('.i-next').removeClass('disable')
}
}
var newsLi = $(id+' .news-group li')
var pageLi = $(id+' .page-control li')
var pageLength = pageLi.length
var currentIndex = $(id+' .page-control li.active').index()
if(currentIndex === 0){
$('.i-prev').addClass('disable')
}
pageLi.on('click',function(){
var index = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
newsLi.eq(index).removeClass('hide').siblings().addClass('hide')
currentIndex = index
arrowShow()
})
// 上一张
$('.i-prev').on('click',function(){
if(currentIndex !== 0){
var prevIndex = currentIndex - 1
pageLi.eq(prevIndex).addClass('active').siblings().removeClass('active')
newsLi.eq(prevIndex).removeClass('hide').siblings().addClass('hide')
currentIndex = prevIndex
arrowShow()
}
})
// 下一张
$('.i-next').on('click',function(){
if(currentIndex !== pageLength - 1){
var nextIndex = currentIndex + 1
pageLi.eq(nextIndex).addClass('active').siblings().removeClass('active')
newsLi.eq(nextIndex).removeClass('hide').siblings().addClass('hide')
currentIndex = nextIndex
arrowShow()
}
})
}
html:
- 1
- 2
- 3
- 4
- 5
