// 请求接口前缀 var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/list"; // $.ajax({ // type: "POST", // url: Baseurl, // data: JSON.stringify({ // examid: 434, // classid: 9666 // }), // dataType: "json", // contentType: "application/json; charset=utf-8", // success: function (data) { // if (data.code === 0) { // loadSectionHtml(data.obj); // } else { // alert(data.msg); // } // } // }); var datalist = [ { time: 2023 }, { time: 2022 }, { time: 2021 }, { time: 2020 }, { time: 2019 }, { time: 2018 }, { time: 2017 } ]; var html = ""; $.each(datalist, (idx, item) => { html += `
${item.time}
`; }); $(".rounds").width(datalist.length * 2.34 + "rem"); $(".rounds").html(html); $(".round_q:first").addClass("active"); //默认第一个添加背景色 //获取元素 var divwidth = $(".round_q:first").width() - 54; console.log(divwidth); var container = $(".showdata"); var list = $(".rounds"); var buts = $(".round_q"); var prev = $(".leftjt"); var next = $(".rightjt"); var index = 1; //存放当前显示的图片的下标 var len = 5; //显示数量 var interval = 5000; //位移时间间隔 var timer; var offsetpx = (datalist.length - len) * divwidth; //可偏移度 var offleft = 0; //当前偏移量 console.log(offsetpx); function animate(offset) { console.log(index); var left = parseInt(list.css("left")) + offset; console.log(left, offset); var absnum = Math.abs(offset); if (left < 0 - offsetpx) { //右侧没有数据时不偏移 return; } // 边界判断 if (offset > 0) { offset = "+=" + offset; offleft = offleft + absnum; console.log(offset); } else { offset = "-=" + Math.abs(offset); offleft = offleft - absnum; console.log(0 - absnum, absnum); } // if (index == datalist.length) { // offset = 0 - (datalist.length - 5) * absnum; // offleft = offset; // console.log(offset); // } console.log(offset, offleft, "当前偏移量"); if (offset >= 0) { console.log(44444); return; } list.animate({ left: offset }, 300, function () { if (left > -200) { console.log(22, (0 - offset) * len); list.css("left", (0 - offset) * len); } if (index == datalist.length) { offset = 0 - (datalist.length - 5) * absnum; offleft = offset; list.css("left", offset); console.log(offset, 1231312); } }); } //亮起小圆点 function showButton() { //当前图片的小圆点亮起,其他小圆点不亮 console.log(index, "gaoliang"); buts .eq(index - 1) .addClass("active") .siblings() .removeClass("active"); } $(".develop_container").bind("mouseenter", () => { stop(); }); $(".develop_container").bind("mouseleave", () => { play(); }); // 鼠标离开图片区域时,轮播继续 function play() { timer = setTimeout(function () { next.trigger("click"); play(); }, interval); } //鼠标进入图片区域时,停止轮播 function stop() { clearTimeout(timer); } // 右按钮点击事件 next.bind("click", function () { // 判断当前是否在动画 if (list.is(":animated")) { return; } // 判断当前图片是否是最后一张 if (index == datalist.length) { index = 1; console.log(222222); offleft = 0; list.animate({ left: 0 }, 300, () => {}); } else { index += 1; } console.log(offleft, "当前偏移量"); console.log("you", index); animate(0 - divwidth); showButton(); stop(); }); // 左按钮事件 prev.bind("click", function () { // 判断当前是否在动画 if (list.is(":animated")) { return; } console.log(index); // 判断当前图片是否是第一张 if (index == 1) { index = datalist.length; } else { index -= 1; } console.log("zuo", index); console.log(offleft, "当前偏移量"); animate(divwidth); showButton(); stop(); }); // 小圆点点击事件 buts.each(function () { $(this).bind("click", function () { // 判断当前是否在进行动画 if (list.is(":animated") || $(this).attr("class") == "on") { return; } // 获取属性 var myIndex = parseInt($(this).attr("index")); console.log(myIndex); //计算偏移量 var offset = (0 - divwidth) * (myIndex - index); if (myIndex <= 2) { offset = 0; console.log(myIndex, 33333); } console.log(offleft, "当前偏移量"); animate(offset); //切换后,更新当前的偏移量 index = myIndex; showButton(); }); }); container.hover(stop, play); play();