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

下面是一些没有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();

函数开始（）{
var img=0，
pic=[“自然”、“草”、“大地”、“瀑布2”、“瀑布”]，
slider=document.getElementsByClassName（'slide_img'），
timerID=0，
延迟=4000；
函数back（）{
img--；
如果（img=图片长度）{
img=0；
}
slider.src='pictures/'+pic[img]+'.jpg'；
}
document.getElementById（'back'）。onclick=function（）{
背（）；
}
document.getElementById（'go'）。onclick=function（）{
go（）；
}
slider.onmouseinter=函数（）{
清除超时（timerID）；
}
document.getElementById（'go'）。onMouseCenter=function（）{
清除超时（timerID）；
}
document.getElementById（'back'）。onMouseCenter=function（）{
清除超时（timerID）；
}
slider.onmouseleave=函数（）{
清除超时（timerID）；
自动（）；
}
函数auto（）{
timerID=setTimeout（函数（）{
go（）；
自动（）；
}，延误）；
}
自动（）；

}

以下是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();

$（'document'）.ready（函数（）{
var img=0，
pic=[“自然”、“草”、“大地”、“瀑布2”、“瀑布”]，
滑块=$（'img.slide\u img'），
timerID=0，
延迟=4000；
函数back（）{
img--；
如果（img=图片长度）{
img=0；
}
slider.attr（'src'，'pictures/'+pic[img]+'.jpg'）；
}
$（'button#back'）。在（'click'，function（）上{
背（）；
});
$（'button#go'）。在（'click'，function（）上{
go（）；
});
$（滑块）.on（'mouseenter'，函数（）{
清除超时（timerID）；
});
$（'button#go'）。on（'mouseenter'，function（）{
清除超时（timerID）；
});
$（'button#back'）。on（'mouseenter'，function（）{
清除超时（timerID）；
});
$（滑块）.on（'mouseleave'，函数（）{
清除超时（timerID）；
自动（）；
});
函数auto（）{
timerID=setTimeout（函数（）{
go（）；
自动（）；
}，延误）；
}
自动（）；

}))

---

我做错了什么，为什么第一个不起作用。我正在尝试摆脱jquery，因此我不必包含源文件。

您没有执行onload

试一试

var img=0，
pic=[“自然”、“草”、“大地”、“瀑布2”、“瀑布”]，
滑块，
timerID=0，
延迟=4000；
window.onload=function（）{
slider=document.getElementsByClassName（'slide_img'）；
document.getElementById（'back'）。onclick=function（）{
背（）；
}
document.getElementById（'go'）。onclick=function（）{
go（）；
}
slider.onmouseover=函数（）{
清除超时（timerID）；
}
document.getElementById（'go'）.onmouseover=function（）{
清除超时（timerID）；
}
document.getElementById（'back'）.onmouseover=function（）{
清除超时（timerID）；
}
slider.onmouseout=函数（）{
清除超时（timerID）；
自动（）；
}
自动（）；
}
函数auto（）{
timerID=setTimeout（函数（）{
go（）；
自动（）；
}，延误）；
}
函数back（）{
img--；
如果（img=图片长度）{
img=0；
}
slider.src='pictures/'+pic[img]+'.jpg'；
}

对规范事件使用“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();
}

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

JavaScript

start

不起任何作用。如果要调用函数，则需要使用

（）

跟随它

不过，这是处理事件处理程序分配的一种相当突兀的方式。通常首选使用JavaScript分配此类内容：

addEventListener('load', start);

有关详细信息，请参见MDN

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

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

start（）；

在文档的末尾

---

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

什么不起作用？浏览器的错误控制台中显示了哪些错误？您是否在某处调用

start（）

？没有，按钮只是不起作用，图片也不会自动更改

slider=document.getElementsByClassName（‘幻灯片_img’）；

为您提供了一个数组，就像您在使用单个元素一样。Vanilla JS在这里不进行隐式迭代，不像jQuery自动迭代它的一些对象。start函数运行

mouseenter

和

mouseleave

事件比它们的同类

m具有更少的浏览器支持useover

和

mouseout

.true-我习惯于jQuery将所有these@mplungjan

slider=document.getElementsByClassName（'slide_img'）；

&

slider.onmouseinter=…

等。我更改了一些内容，谢谢大家的帮助，我如何删除这个问题？

addEventListener('load', start);

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