如何使图像自动更改

How to make images change automatically

本文关键字：何使 图像      更新时间：2024-06-20

我是javascript的新手，我正在尝试制作一个特色内容滑块，就像这个网站的顶部横幅一样http://www.homeplus.co.kr

正如你所看到的，顶部的大横幅会自动改变&当用户将鼠标悬停在右侧某个列表上时，也会发生变化。

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

下面是一个示例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';
}

任何帮助都将不胜感激

试试这个：

var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s
function autoAnim(){
    if(cur > 3) cur = 0;
    blip(cur);
    cur++;
}

这是jsfiddle

您可以使用函数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);
}

当鼠标悬停时，您可能想要使函数休眠，而其他一些条件

相关文章：