jquery实现分页切换

案例效果：

主要交互：

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

实现代码如下：

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.lengthvar 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 = indexarrowShow()})// 上一张$('.i-prev').on('click',function(){if(currentIndex !== 0){var prevIndex = currentIndex - 1pageLi.eq(prevIndex).addClass('active').siblings().removeClass('active')newsLi.eq(prevIndex).removeClass('hide').siblings().addClass('hide')currentIndex = prevIndexarrowShow()}})// 下一张$('.i-next').on('click',function(){if(currentIndex !== pageLength - 1){var nextIndex = currentIndex + 1pageLi.eq(nextIndex).addClass('active').siblings().removeClass('active')newsLi.eq(nextIndex).removeClass('hide').siblings().addClass('hide')currentIndex = nextIndexarrowShow()}})}

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&fm=253&fmt=auto&app=120&f=JPEG?w=889&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><li class="news-item hide"><div class="imgbox"><img src="https://img0.baidu.com/it/u=468539302,3909142183&fm=253&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;}

向左向右的箭头如下：

jquery实现分页切换相关推荐

18款非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
jQuery Pagination分页插件
demo实例页面基本demo页面 Ajax demo页面参数可编辑demo页面插件简介此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法, ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
jquery 3D分页翻转滑块
jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效. 转载于:h ...
Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.com ...
jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
jquery ui动态切换主题的一种实现方式
这两天看coreservlets上的jQuery教程,虽然比较老了,不过讲得还是不错. 最后一部分讲jQuery ui 主题切换,用他介绍的方法实现不了.于是自己修改了下,可以了. 代码如下: htm ...
Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...

jquery实现分页切换

主要交互：

实现代码如下：

js：

html:

css:

jquery实现分页切换相关推荐

最新文章

热门文章