jquery实现分页切换

本文介绍: 案例效果：点击下面页码，选择对应页面的效果。点击向左向右的箭头，页面切到上一张或者下一张，当前页面是第一张时不能继续选择上一张，反之亦然。html:css:向左向右的箭头如下：

主要交互：

点击下面页码，选择对应页面的效果。点击向左向右的箭头，页面切到上一张或者下一张，当前页面是第一张时不能继续选择上一张，反之亦然。

实现 代码 如下：

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&lt; currentIndex &lt; 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:

<div id="img-change" class="img-change">
    <div class="con">
      <ul class="news-group">
        <li class="news-item">
            <div class="imgbox"><img src="https://img0.baidu.com/it/u=3798217922,3880088897&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=889&amp;h=500" alt=""></div>
        </li>
        <li class="news-item hide">
            <div class="imgbox"><img src="https://img1.baidu.com/it/u=3569420573,2690721824&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=889&amp;h=500" alt=""></div>
        </li>
        <li class="news-item hide">
            <div class="imgbox"><img src="https://img0.baidu.com/it/u=468539302,3909142183&amp;fm=253&amp;fmt=auto&app=120&f=JPEG?w=1200&h=676" alt=""></div>
        </li>
        <li class="news-item hide">
            <div class="imgbox"><img src="https://img0.baidu.com/it/u=3591945339,477239951&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></div>
        </li>
        <li class="news-item hide">
            <div class="imgbox"><img src="https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt=""></div>
        </li>
      </ul>
      <div class="page-control clearfix">
        <div class="page-con">
          <i class="i-prev"></i>
          <ul class="clearfix">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
          <i class="i-next"></i>
        </div>
      </div>
    </div>
  </div>
</div>

css:

ul,ol{list-style: none;}
a{text-decoration: none;}
.img-change .popwin-main .con {overflow: initial;max-height: 600px;padding: 15px 20px 6px;}
*{margin: 0;padding:0;}
.hide{display: none;}
.img-change .popwin-main .con{overflow: initial;max-height: 600px;padding: 15px 20px 6px;}
.img-change .news-group{margin-bottom: 10px;}
.img-change .imgbox{width: 700px;height: 350px;background: #333333;border-radius: 4px;overflow: hidden;}
.img-change .imgbox img{width: 700px;height: 350px;}
.img-change .page-control .page-con{float: right;}
.img-change .page-control ul{float: left;height: 34px;}
.img-change .page-control .i-prev{cursor: pointer; display: block;float: left; width: 24px;height:24px;background: url(images/i-prev1.png) no-repeat center center;background-size: 8px 13px;}
.img-change .page-control .i-prev.disable{background: url(images/i-prev2.png) no-repeat center center;}
.img-change .page-control .i-next{cursor: pointer; display: block;float: left; width: 24px;height:24px;background: url(images/i-next1.png) no-repeat center center;background-size: 8px 13px;}
.img-change .page-control .i-next.disable{background: url(images/i-next2.png) no-repeat center center;}
.img-change .page-control ul li{cursor: pointer; width: 24px;float: left;margin-right: 2px; font-size: 12px;color: #999;height: 24px;background: none;border-radius: 2px;text-align: center;line-height: 24px;}
.img-change .page-control li.active,.img-news-pop .page-control li:hover{background: #F6F6F6;color: #666666;font-weight: bold;}
.img-change .btn-know{cursor: pointer; width: 81px;border: none;height: 32px;background: #3197FF;border-radius: 4px;}