Created with Sketch. `; html += `
`+ name + `
`; html += `
` + time + `
`; html += `
`+ num + `
`; } html += ""; $(".xiaoqing").html(html); if (dataList.length < 7) { $(".page-wrapper").css("display", "none"); $(".xiaoqing").css("margin-bottom", "60px"); } else { $(".page-wrapper").css("display", "flex"); $(".xiaoqing").css("margin-bottom", "0") } $(".xiaoqing-item").click(function () { articalid = $(this).find(".xq-player-wrapper").find(".player-id").text(); sendArticalSee(); }) $(".xiaoqing-item").hover(function () { // $(this).find(".xq-player").find("img").css({ "transform": "scale(1.05,1.05)", "transition": "all 0.5s linear" }); $(this).find(".xq-desc").css({ "border-color": "transparent", "box-shadow": "0px 2px 12px 0px rgba(229, 227, 227, 0.5)", "transition": "all linear 0.2s" }) $(this).find(".xq-desc-name").css("color", "#BE4650"); $(this).find("#border").css("display", "block"); }, function () { // $(this).find(".xq-player").find("img").css({ "transform": "scale(1,1)", "transition": "all 0.5s linear" }); $(this).find(".xq-desc-name").css("color", "#111"); $(this).find(".xq-desc").css({ "border": "1px solid #ddd", "box-shadow": "0px 0px 0px 0px rgba(229, 227, 227, 0)" }) $(this).find("#border").css("display", "none"); }) $(function () { tabPage({ pageMain: "#pageMain", //主要内容 pageNav: ".pageNav", //页码 firstPage: ".first-page", //新万博首页网址z prevPage: ".prev-page", //上一页 nextPage: ".next-page", //下一页 lastPage: ".last-page", //尾页 curNum: 6, //每页的展示条数 activeClass: "page-active", //页码点击后的按钮class disableClass: "page-disabled", //上一页下一页不可点击的图 }); // console.log($("#pageMain").find(".rank-hot-list1").length) function tabPage(tabPage) { var pageMain = $(tabPage.pageMain); //获取主要内容 var pageNav = $(tabPage.pageNav); //获取分页 var pagePrev = $(tabPage.prevPage); //获取上一页 var pageNext = $(tabPage.nextPage); //获取下一页 var pageFirst = $(tabPage.firstPage); //获取新万博首页网址z var pageLast = $(tabPage.lastPage); //获取尾页 var curNum = tabPage.curNum; //获取每页条数 var pageList = "";//页码 var len = Math.ceil(dataList.length / curNum); //获取总页数 var isNum = 0; //当前页码索引值 for (let i = 0; i < len; i++) { pageList += '' + (i + 1) + ""; } pageNav.html(pageList); pageNav.find("a:first").addClass(tabPage.activeClass); pagePrev.addClass(tabPage.disableClass); // 页码点击事件0611修改页码过多问题 pageNav.find("a").each(function () { $(this).click(function () { // let page = index + 1; $(".page-container").find("span").removeClass(tabPage.activeClass); pageNav.find("a").removeClass(tabPage.activeClass); $(this).addClass(tabPage.activeClass); isNum = $(this).index(); if (isNum == 0) { pagePrev.addClass(tabPage.disableClass); pageNext.removeClass(tabPage.disableClass); } else if (isNum == len - 1) { pagePrev.removeClass(tabPage.disableClass); pageNext.addClass(tabPage.disableClass); } else { pagePrev.removeClass(tabPage.disableClass); pageNext.removeClass(tabPage.disableClass); } $(pageMain).find(".xiaoqing-item").hide(); // console.log($(this).html()); for ( var i = ($(this).html() - 1) * curNum; i < $(this).html() * curNum; i++ ) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } // console.log(page,"sdcz") if (len < 6) { return; } else { if (isNum > 2 && isNum <= (len - 3)) { let offsetX = -(isNum - 2) * 32 + 'px,0,0'; $(".pageNav a").css("transform", "translate3d(" + offsetX + ")"); console.log(offsetX); } if (isNum <= 2) { $(".pageNav a").css("transform", "translate3d(0,0,0)"); } if (isNum == len - 2) { let offsetX = -(isNum - 3) * 32 + 'px,0,0'; $(".pageNav a").css("transform", "translate3d(" + offsetX + ")"); } } }); }); $(pageMain).find(".xiaoqing-item").hide(); for (let i = 0; i < curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } // 新万博首页网址z pageFirst.click(function () { $(pageMain).find(".xiaoqing-item").hide(); pageNav.find("a").removeClass(tabPage.activeClass); pageNav.find("a:first").addClass(tabPage.activeClass); pagePrev.addClass(tabPage.disableClass); pageNext.removeClass(tabPage.disableClass); for (let i = 0; i < curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } if (len < 6) { return; } else { $(".pageNav a").css("transform", "translate3d(0,0,0)"); } isNum = 0; }); // 上一页 pagePrev.click(function () { $(pageMain).find(".xiaoqing-item").hide(); if (isNum > 0) { for (let i = (isNum - 1) * curNum; i < (isNum) * curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } } pageNext.removeClass(tabPage.disableClass); if (len < 6) { if (isNum == 0) { // alert("当前是第一页"); $(pageMain).find(".xiaoqing-item").hide(); for (var i = 0; i < curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } return false; } else { pageNav.find("a").removeClass(tabPage.activeClass); isNum--; pageNav.find("a").eq(isNum).addClass(tabPage.activeClass); } } else { if (isNum > 2 && isNum <= (len - 3)) { let offsetX = -(isNum - 3) * 32 + 'px,0,0'; $(".pageNav a").css("transform", "translate3d(" + offsetX + ")"); console.log(offsetX); pageNav.find("a").removeClass(tabPage.activeClass); isNum--; pageNav.find("a").eq(isNum).addClass(tabPage.activeClass); } if (isNum <= 2 && isNum > 0) { $(".pageNav a").css("transform", "translate3d(0,0,0)"); pageNav.find("a").removeClass(tabPage.activeClass); isNum--; pageNav.find("a").eq(isNum).addClass(tabPage.activeClass); } if (isNum == len - 2 || isNum == len - 1) { let x = -(len - 5) * 32 + 'px,0,0'; console.log(x) $(".pageNav a").css("transform", "translate3d(" + x + ")"); pageNav.find("a").removeClass(tabPage.activeClass); isNum--; pageNav.find("a").eq(isNum).addClass(tabPage.activeClass); } if (isNum == 0) { $(pageMain).find(".xiaoqing-item").hide(); for (var i = 0; i < curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } pagePrev.addClass(tabPage.disableClass); pageNext.removeClass(tabPage.disableClass); return false; } } }); // 下一页 pageNext.click(function () { $(pageMain).find(".xiaoqing-item").hide(); if (isNum == len - 1) { for (var i = (len - 1) * curNum; i < len * curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } pageNext.addClass(tabPage.disableClass); pagePrev.removeClass(tabPage.disableClass); return false; } else { pageNav.find("a").removeClass(tabPage.activeClass); isNum++; pageNav.find("a").eq(isNum).addClass(tabPage.activeClass); pagePrev.removeClass(tabPage.disableClass); } for (let i = isNum * curNum; i < (isNum + 1) * curNum; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } if (len < 6) { return; } else { if (isNum > 2 && isNum <= (len - 3)) { let offsetX = -(isNum - 2) * 32 + 'px,0,0'; $(".pageNav a").css("transform", "translate3d(" + offsetX + ")"); console.log(offsetX); } if (isNum == len - 2) { let nextX = -(len - 5) * 32 + 'px,0,0'; $(".pageNav a").css("transform", "translate3d(" + offsetX + ")"); } if (isNum <= 2) { $(".pageNav a").css("transform", "translate3d(0,0,0)"); } } }); // 尾页 pageLast.click(function () { $(pageMain).find(".xiaoqing-item").hide(); pageNav.find("a").removeClass(tabPage.activeClass); pageNav.find("a:last").addClass(tabPage.activeClass); pageNext.addClass(tabPage.disableClass); pagePrev.removeClass(tabPage.disableClass); for (let i = (len - 1) * curNum; i < dataList.length; i++) { $(pageMain).find(".xiaoqing-item").eq(i).show(); } if (len < 6) { return; } else { let weiye = -(len - 5) * 32 + "px,0,0" $(".pageNav a").css("transform", "translate3d(" + weiye + ")"); } isNum = len - 1; console.log(isNum) }); } }); } }) } getArtical(); let articalid = ""; function sendArticalSee() { $.ajax({ type: "post", url: "https://qnupload.ifaceyun.com/SonicCRM/webservice/sendArticalSee.php", async: "true", dataType: "json", crossDomain: "true", data: { pid: 48, articalid }, success: function (data) { console.log(data) } }) } $(".xiaoqiang").on("click", "xiaoqing-item", function () { console.log(999) })