// 请求接口前缀
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 += `
`;
});
$(".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();