Question

我正在使用这个JS代码制作横幅：

var images = ["../../images/g11.jpg","../../images/g9.jpg","../../images/g10.jpg"];
var titulos = ["title1","title2","title3"];
var resumos = ["ddd","aaa","bbb"];
var noticias = ["190","204","200"];

var total = 3;
var indice = 0;

function rotate() {
    document.getElementById('imageb').src = images[indice];
    document.getElementById('titulob').innerHTML = titulos[indice];
    document.getElementById('resumob').innerHTML = resumos[indice];
    document.getElementById('noticiab').value = noticias[indice];
    indice++;
    if (indice > total - 1) indice = 0;
}

function banner() {
    rotate();
    setTimeout(banner, 5000);
}

它可以达到预期的效果，但在一些循环之后会冻结浏览器。很确定我没有正确使用setTimeout。有什么想法吗？

修改

到目前为止工作：

function rotate(indice) {
    document.getElementById('imageb').src = images[indice];
    document.getElementById('titulob').innerHTML = titulos[indice];
    document.getElementById('resumob').innerHTML = resumos[indice];
    document.getElementById('noticiab').value = noticias[indice];
}

function banner(indice) {
    var f1 = function() { banner(indice); };
    var total = 3;
    rotate(indice);
    indice++;
    if (indice > total - 1) indice = 0;
    setTimeout(f1, 5000);
}

Answer 1

我将此作为CW发布，因为这是一个完全猜测。

完全FWIW，这是我如何最小化地改变代码：Live Copy | Live Source

(function() {
    var entries = [
        {
            img:        "../../images/g11.jpg",
            titulo:     "title1",
            resumo:     "ddd",
            noticia:    "190"
        },
        {
            img:        "../../images/g9.jpg",
            titulo:     "title2",
            resumo:     "aaa",
            noticia:    "204"
        },
        {
            img:        "../../images/g10.jpg",
            titulo:     "title3",
            resumo:     "bbb",
            noticia:    "200"
        }
    ];

    var indice = 0;

    function rotate() {
        var entry = entries[indice];
        document.getElementById('imageb').src = entry.img;
        document.getElementById('titulob').innerHTML = entry.titulo;
        document.getElementById('resumob').innerHTML = entry.resumo;
        document.getElementById('noticiab').value = entry.noticia;

        indice = (indice + 1) % data.length;
    }

    function banner() {
        rotate();
        setTimeout(banner, 5000);
    }

    banner();
})();

的变化：

将所有内容放在作用域函数中以避免创建全局变量。
使用对象数组而不是并行数组。
使用数组的长度而不是单独的total变量。
使用余下的技巧来获取indice变量的环绕。
我在最后添加了对banner();的调用以启动操作，但我认为你有这个并且没有显示它。

但是，除了可能发生一些奇怪的全局变量冲突之外，我认为你的代码不应该按原样运行。

Javascript函数工作了一段时间，然后冻结浏览器

1 个答案: