Question

下面是一些没有jquery但没有工作的代码：

function start() {
var img = 0,
pic = ['nature', 'grass', 'earth', 'fall2', 'waterfall'],
slider = document.getElementsByClassName('slide_img'),
timerID = 0,
delay = 4000;

function back() {
    img--;
    if (img <= 0) {
        img = pic.length - 1;
    }
    slider.src = 'pictures/' + pic[img] + '.jpg';
}

function go() {
    img++;
    if (img >= pic.length) {
        img = 0;
    }
    slider.src = 'pictures/' + pic[img] + '.jpg';
}

document.getElementById('back').onclick = function() {
    back();
}

document.getElementById('go').onclick = function() {
    go();
}

slider.onmouseenter = function() {
    clearTimeout(timerID);
}

document.getElementById('go').onmouseenter = function() {
    clearTimeout(timerID);
}

document.getElementById('back').onmouseenter = function() {
    clearTimeout(timerID);
}

slider.onmouseleave = function() {
    clearTimeout(timerID);
    auto();
}

function auto() {
    timerID = setTimeout(function () {
        go();
        auto();
    }, delay);
}

auto();

}

以下是jquery中的内容，这个有效：

$('document').ready(function() {
var img = 0,
pic = ['nature', 'grass', 'earth', 'fall2', 'waterfall'],
slider = $('img.slide_img'),
timerID = 0,
delay = 4000;

function back() {
    img--;
    if (img <= 0) {
        img = pic.length - 1;
    }
    slider.attr('src', 'pictures/' + pic[img] + '.jpg');
}

function go() {
    img++;
    if (img >= pic.length) {
        img = 0;
    }
    slider.attr('src', 'pictures/' + pic[img] + '.jpg');
}

$('button#back').on('click', function() {
    back();
});

$('button#go').on('click', function() {
    go();
});

$(slider).on('mouseenter', function () {
    clearTimeout(timerID);
});

$('button#go').on('mouseenter', function () {
    clearTimeout(timerID);
});

$('button#back').on('mouseenter', function () {
    clearTimeout(timerID);
});

$(slider).on('mouseleave', function () {
    clearTimeout(timerID);
    auto();
});

function auto() {
    timerID = setTimeout(function () {
        go();
        auto();
    }, delay);
}

auto();

}）;

我做错了什么，为什么第一个不行。我正试图摆脱jquery所以我不必包括源文件。

Answer 1

您没有执行onload

试

var img = 0,
pic = ['nature', 'grass', 'earth', 'fall2', 'waterfall'],
slider,
timerID = 0,
delay = 4000;

window.onload=function() {
  slider = document.getElementsByClassName('slide_img');
  document.getElementById('back').onclick = function() {
    back();
  }

  document.getElementById('go').onclick = function() {
    go();
  }

  slider.onmouseover = function() {
    clearTimeout(timerID);
  }

  document.getElementById('go').onmouseover = function() {
    clearTimeout(timerID);
  }

  document.getElementById('back').onmouseover = function() {
    clearTimeout(timerID);
  }

  slider.onmouseout = function() {
    clearTimeout(timerID);
    auto();
  }
  auto();
}
function auto() {
    timerID = setTimeout(function () {
        go();
        auto();
    }, delay);
}
function back() {
    img--;
    if (img <= 0) {
        img = pic.length - 1;
    }
    slider.src = 'pictures/' + pic[img] + '.jpg';
}

function go() {
    img++;
    if (img >= pic.length) {
        img = 0;
    }
    slider.src = 'pictures/' + pic[img] + '.jpg';
}

Answer 2

对规范事件使用“onmouseover”和onmouseout：

slider.onmouseover = function() {
    clearTimeout(timerID);
}

document.getElementById('go').onmouseover = function() {
    clearTimeout(timerID);
}

document.getElementById('back').onmouseover = function() {
    clearTimeout(timerID);
}

slider.onmouseout = function() {
    clearTimeout(timerID);
    auto();
}

不要忘记定义“滑块”（脚本中缺少初始部分）：

var slider = document.querySelector('img.slide_img');

Answer 3

<body onload="start"></body>

JavaScript start没有做任何事情。如果您想调用某个函数，则需要使用()。

这是一种处理事件处理程序赋值的相当突兀的方法。通常首选使用JavaScript分配这些内容：

addEventListener('load', start);

请参阅MDN了解compatibility notes。

但是，代码中没有任何内容依赖于正在加载的整个文档。所以你可以简单地说：

    <script>
        start();
    </script>
</body>

在您的文档末尾。

（您可以将整个脚本放在那里，并将其保存在外部文件中）。

Jquery代码工作，javascript没有，我做错了什么？

3 个答案: