Question

banner图js轮播，为啥第一个图要鼠标才能播放

window.onload = function () {
var content = document.getElementById("content");
var banner = document.getElementById("banner");
var li = document.querySelectorAll("#banner li");
var spanNode = document.querySelectorAll("#buttons span");
var img = document.getElementsByTagName("img")[0];

//前后按钮
var prev = document.getElementById('prev');
var next = document.getElementById('next');

//索引
var index = 1;

var timer = 0;

//给 content 设置宽，高，以及overflow:hidder
content.style.width = img.offsetWidth + "px";
content.style.height = img.offsetHeight + "px";
content .style.overflow = "hidden";

//给banner 设置宽高
banner.style.height = img.offsetHeight + "px";
banner.style.width = img.offsetWidth * li.length + "px";
banner.style.left = "-720px";

//轮播图

function animate(offset) {
banner.style.transition = "0.5s";
banner.style.left = -parseInt(offset )* index + "px";
}

next.onclick = function () {
//点击下一页：移动
if(index == spanNode.length){
index = 0;

}
index ++;
console.log("索引index:"+index);

animate(img.offsetWidth)
showButton()

}

prev.onclick = function () {
if(index == 1){
index = li.length-1;

}
index--;
animate(img.offsetWidth)
showButton()

}

function showButton() {

for (var i = 0; i< spanNode.length; i++){

spanNode[i].className = '';

}
console.log("小圆点的index值："+index);
spanNode[index-1].className = "on";

}

//自动轮播

function play() {
timer = setInterval(function () {
banner.style.transition = "none";
setTimeout(function () {

next.onclick();

},200)
},3000);
}

Answer 1

在鼠标没有停留banner时写一个定时轮播/鼠标在banner上执行停留轮播不就行了