let timer; // setInterval载体
const myCarousel = document.getElementById('myCarousel');
const list = document.getElementById('list');
const buttons =
document.getElementById('buttons').getElementsByTagName('span');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
let index = 1; //按钮下标
let animated = false; // 图片切换ing的状态
window.onload = function () {
function animate(offSet) {
animated = true;
const newLeft = parseInt(list.style.left) + offSet;
const time = 500;
const interval = 5;
const speed = offSet / (time / interval);
function go() {
if (Math.abs(parseInt(list.style.left) - newLeft) > 6) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, interval);
} else {
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1366) {
list.style.left = -2731 + 'px';
} else if (newLeft < -2731) {
list.style.left = -1366 + 'px';
}
}
}
go();
console.log(new Date() + ": animate: " + timer);
}
/*点击左箭头切换图片*/
prev.onclick = function () {
if (!animated) {
index -= 1;
if (index === 0) {
index = 2
}
showButton();
animate(1366)
}
};
/*点击右箭头切换图片*/
next.onclick = function () {
if (!animated) {
index += 1;
if (index === 3) {
index = 1
}
showButton();
animate(-1366);
}
};
/*自动播放*/
function play() {
console.log(new Date() + ": play before: " + timer);
timer = window.setInterval(function () {
next.onclick(); // ()存在的原理尚未清楚
}, 5000);
console.log(new Date() + ": play after: " + timer);
}
/*自动暂停*/
function stop() {
window.clearInterval(timer);
console.log(new Date() + ": stop: " + timer);
}
myCarousel.onmouseout = play;
myCarousel.onmouseover = stop;
play();
};
这是我轮换之一的代码,但是它不起作用,并且console.log成功地记录了计时器。一个生效一个生效一个没有生效,我要崩溃了! 一切似乎都还好,我试图检查我可以在Internet上找到的信息,但没有任何效果