Javascript 如何使图像自动更改

我是javascript新手，我正在尝试做一个特色内容滑块，比如这个网站的头条

如您所见，顶部的大横幅会自动更改&当用户将鼠标悬停在右侧的某个列表上时，也会更改

现在我可以做悬停部分，但我仍然停留在自动更改内容部分

下面是一个示例JSFIDLE：

javascript:

div = document.getElementsByClassName('c1');
div[0].style.display = 'block'
B = document.getElementsByClassName('pi');
B[0].onmouseover = function () {
    blip(0);
};
B[1].onmouseover = function () {
    blip(1);
};
B[2].onmouseover = function () {
    blip(2);
};
B[3].onmouseover = function () {
    blip(3);
};

function blip(y) {
    div = document.getElementsByClassName('c1');
    for (x = 0; x < (div.length); x++) {
        div[x].style.display = 'none';
    }
    div[y].style.display = 'block';
}

div=document.getElementsByClassName（'c1'）；
div[0]。style.display='block'
B=document.getElementsByClassName（'pi'）；
B[0]。onmouseover=函数（）{
光点（0）；
};
B[1]。onmouseover=函数（）{
光点（1）；
};
B[2]。onmouseover=函数（）{
光点（2）；
};
B[3]。onmouseover=函数（）{
光点（3）；
};
功能点（y）{
div=document.getElementsByClassName（'c1'）；
对于（x=0；x<（div.length）；x++）{
div[x].style.display='none'；
}
div[y].style.display='block'；
}

---

非常感谢您提供的任何帮助

您可以使用函数

setTimeout

在XX毫秒后调用某些内容

var number=0;
setTimeout(automatic,5000);  // every 5 seconds

function automatic(){
  blip(number);
  number++;
  if (number > 4)
    number=0;
  alert("Hello");
  setTimeout(automatic,5000);
}

您可能希望在鼠标悬停和其他一些条件下使函数休眠，请尝试以下操作：

var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s

function autoAnim(){
    if(cur > 3) cur = 0;
    blip(cur);
    cur++;
}

---

这里是

您已经用jQuery标记了它，但在JSFIDLE示例中似乎根本没有使用它。你确定你在寻找jQuery的答案吗？对不起，我以为jQuery和javascript是同一个lol。对不起，我弄错了。但是，仅仅使用javascript就可以做到这一点吗？不用担心。：）jQuery是一个流行的JavaScript库，可以在上找到。这是一个问题应该怎么问的！欢迎来到堆栈溢出。这是一个已经有很多答案的常见问题。建议在询问之前进行搜索。例如，您的意思是

setInterval

？setTimeout只执行一次，setInterval每N毫秒继续执行一次。不，我的意思是

setTimeout

。请参阅运行其他setTimeout的自动函数的结尾。但是setInterval可能是一个更好的选择（正如hicurin所回答的）对不起，我不是说你的答案不正确，它当然会起作用，我只是想指出，避免不必要的递归可能是一件好事！谢谢你提出你的答案是的！我非常感激！哇！非常感谢。这就像魔术！哈哈，非常感谢！

var number=0;
setTimeout(automatic,5000);  // every 5 seconds

function automatic(){
  blip(number);
  number++;
  if (number > 4)
    number=0;
  alert("Hello");
  setTimeout(automatic,5000);
}

var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s

function autoAnim(){
    if(cur > 3) cur = 0;
    blip(cur);
    cur++;
}