Question

我是javascript的新手，我正在尝试制作一个精选内容滑块，例如本网站中的顶部横幅http://www.homeplus.co.kr

正如您所看到的，顶部大横幅自动更改＆amp;当用户将鼠标悬停在右侧的列表中时，也会发生变化。

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

以下是jsfiddle示例：http://jsfiddle.net/StormSdq/5tWPy/2/

<div class="pi">a</div>
<div class="pi">b</div>
<div class="pi">c</div>
<div class="pi">d</div>
<div class="c1">I DREAM</div>
<div class="c1">OF LLAMAS</div>
<div class="c1">JUMPING AROUND</div>
<div class="c1">EATING BUSHES</div>

的CSS：

.pi {
    font-size:12px;
    color:#000;
    font-weight:700;
    width:30px;
    height:25px;
    margin-right:10px;
    background:transparent;
    border-bottom:solid 1px black;
}
.c1 {
    border:1px solid blue;
    background:lightskyblue;
    width:200px;
    height:200px;
    float:right;
    margin-right:430px;
    margin-top:-100px;
    color:red;
    font-size:25px;
    text-align:center;
    display:none;
}

的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';
}

非常感谢任何帮助

Answer 1

试试这个：

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

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

这是jsfiddle

Answer 2

您可以使用函数setTimeout在X毫秒后调用某些内容。

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

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

当鼠标悬停以及其他一些条件

时，您可能希望让该功能进入休眠状态

如何自动更改图像

2 个答案: