记录小功能---------分页

css代码

#video_activity .act2_module{width: 100%; min-height:800px; position: relative;background: url(/static/video_activity/img/act_bg.jpg); overflow: hidden;}
/* /2 */
#video_activity .act2_module1{width: 1200px;height: auto; margin: 0 auto;padding-top: 40px;padding-bottom: 60px;} 
#video_activity .act2ul_box{display: flex;flex-wrap: wrap;}
#video_activity .act2ul_box li {width:31%; height:auto; list-style: none; margin-bottom:30px;color: #fff;margin-right:3.5%;position: relative;}
#video_activity .act2ul_box li:nth-child(3n){margin-right: 0;}
#video_activity .act2ul_box li img{width: 100%;vertical-align: middle;transition:all .5s;border-radius: 5px;}
#video_activity .act2ul_box li:hover img {transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1);}
#video_activity .act2_liicon{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: block;z-index: 1;cursor: pointer;}
/* 阴影遮罩 */
#video_activity .act2_liicon1{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: block;z-index: 1;background-color: rgba(00,00,00,.3);transition:all .5s;}
#video_activity .act2ul_box li:hover .act2_liicon1{transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1);}
/* 播放按钮 */
#video_activity .act2_liicon_icon{cursor: pointer; display: block;width: 46px;height: 46px;background: url(/static/video_activity/img2/actbtn2.png) no-repeat; position: absolute;  transform: translate(-50%, -50%);background-size: 100%; left: 50%;top: 50%;opacity: 1;transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);text-indent: -9999px; overflow: hidden;}
#video_activity .act2ul_box li:hover .act2_liicon_icon{background: url(/static/video_activity/img2/actbtn1.png) no-repeat;background-size: 100%;}
/* 标题和name */
#video_activity .act2_litxt{width: 100%; position: absolute;bottom: 0;left: 0;z-index: 6;}
#video_activity .act2_lip1{font-size: 18px;text-align: left;padding:0 10px;color: #fff;font-weight: 600; margin-bottom: 6px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#video_activity .act2_lip2{font-size: 16px;text-align: left;padding:0 10px;color: #fff;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
/* 分页 */
#video_activity .act2_btn_box{text-align: center;padding-top: 60px;}
#video_activity .act2_page_box{font-size: 14px;display: inline-flex;}
#video_activity .act2_span{padding:6px 12px;color:#3bb7f5;border-right: 1px #ccc solid; cursor: pointer;background-color: #fff;}
#video_activity .act2_prev{padding:6px 12px;color: #3bb7f5;border-right:1px #ccc solid; cursor: pointer;background-color: #fff;border-radius: 4px 0 0 4px;}
#video_activity .act2_next{padding:6px 12px;color: #3bb7f5;cursor: pointer;background-color: #fff;border-radius: 0 4px 4px 0;}
#video_activity .act2_span:last-child{border-right: 1px #ccc none;}
#video_activity .act2_span_chose{background-color: #3bb7f5;color: #fff;border: 1px solid #3bb7f5;}

html 代码  

​
<div id="video_activity">
	<div class="act2_module1">
		<ul class="act2ul_box">
			<!-- 1 -->
			<li><a href="https://youtu.be/IbjxqIIVPfw" target="_blank">                    
                <imgsrc="/static/video_activity/img2/1.jpg" />
			    <div class="act2_liicon1"></div>
                <div class="act2_liicon"><div class="act2_liicon_icon"></div></div>
			    </a><div class="act2_litxt"><p class="act2_lip1">One Day in Life of an illustrator#1</p><p class="act2_lip2">XPPen Official Team</p></div>
			</li>
			<!-- 2 -->
			<li><a href="https://youtu.be/eJms9unkYNQ" target="_blank">
                <img src="/static/video_activity/img2/2.jpg" />
				<div class="act2_liicon1"></div>
                <div class="act2_liicon"><div class="act2_liicon_icon"></div></div>
				</a><div class="act2_litxt"><p class="act2_lip1">One Day in Life of an illustrator#2</p><p class="act2_lip2">XPPen Official Team</p></div>
			</li>
		</ul>
		<div class="act2_btn_box">
			<span class="act2_page_box">
				<span class="act2_prev"><</span> 
				<span class="act2_next">></span>
			</span>
		</div>
	</div>
</div>

​

jq

<script>
		$(function() {
			$(".act2ul_box li:gt(29)").hide(); //  初始化，只显示前30个
			var li_length = $(".act2ul_box li").length; //获取li的个数
			var total_page = Math.ceil(li_length / 30); //计算总的页数
			// 遍历出页码数
			if (total_page > 0) {
				var i = total_page;
				console.log(i)
				for (i; i > 0; i--) {
					var ht;
					ht = '<span class="act2_span" id="' + i + '">' + i + '</span>'
					$('.act2_prev').after(ht);//把元素插入 act2_prev 的后面,插入的是3，2，1,排列出来的是123.
					console.log(ht)
				}
			}
			//给第一页默认添加选中样式
			$(".act2_span:first").addClass("act2_span_chose")
			// 给 act2_span 绑定点击事件
			$(document).on("click", ".act2_span", function() {
				var str = $(this).html();//获取当前点击act2_span的内容
				//console.log(str)
				if (!isNaN(str)) {//判断 str 是否非数字 是数字为 true ,非数字为 false
					//移除之前的active
					$(".act2_span").removeClass("act2_span_chose");
					$(this).addClass("act2_span_chose");
				}
				$(".act2ul_box li").each(function(index, item) {
					var start = (str - 1) * 30;
					var end = ((str) * 30) - 1;
					if (index >= start && index <= end) {
						$(this).show();
					} else {
						$(this).hide();
					}
				})
			});
			// 下一页
			$(".act2_next").click(function() {
				//获取 act2_span_chose 的内容
				var stract1_ = $(".act2_span_chose").html();
				// 判断 stract1_ 是否大于总页数
				if (stract1_ >= total_page) {
					return false; //最后一页时，禁止点击
				} else {
					var num = $(".act2_span_chose").html();
					$(".act2_span").removeClass("act2_span_chose");
					$("#" + (parseInt(num) + 1) + "").addClass("act2_span_chose");
					console.log((parseInt(num) + 1))
					 ++stract1_;
					$(".act2ul_box li").each(function(index, item) { //遍历
						var start = (stract1_ - 1) * 30; //计算更改当前页
						var end = (stract1_ * 30) - 1; //对应四个图片（li）的索引
						if (index >= start && index <= end) {
							$(this).show(); //在索引范围内的显示
						} else {
							$(this).hide();
						}
					})
				}
			})
			// 上一页
			$(".act2_prev").click(function() {
				var stract2_ = $(".act2_span_chose").html();
				if (stract2_ <= 1) {
					return false;
				} else {
					//获取.act2_span_chose的内容
					var num = $(".act2_span_chose").html();
					//移除 .act2_span_chose 
					$(".act2_span").removeClass("act2_span_chose");
					$("#" + (parseInt(num) - 1) + "").addClass("act2_span_chose");
					--stract2_;
					$(".act2ul_box li").each(function(index, item) {
						var start = (stract2_ - 1) * 30;
						var end = ((stract2_) * 30) - 1;
						if (index >= start && index <= end) {
							$(this).show();
						} else {
							$(this).hide();
						}
					})
				}
			})
		})
	</script>

路过的点个赞，谢谢

本文是借鉴此文 https://blog.csdn.net/sex_man/article/details/79241191