JQuery код работает, Javascript нет, что я делаю не так?

0

Ниже приведен код, который не имеет 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, поэтому мне не нужно включать исходный файл.

  • 2
    Что не работает? Какие ошибки отображаются в консоли ошибок вашего браузера?
  • 0
    Вы звоните start() где-нибудь?
Показать ещё 3 комментария
Теги:

3 ответа

0

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

JavaScript start не делает ничего. Если вы хотите вызвать функцию, вам нужно следовать ей с помощью ().

Это довольно назойливый способ справиться с назначением обработчика событий. Обычно рекомендуется назначать такие вещи с помощью JavaScript:

addEventListener('load', start);

См. MDN для заметок о совместимости.

Однако в вашем коде нет ничего, что зависит от всего загружаемого документа. Поэтому вы можете просто:

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

в конце вашего документа.

(Вы можете поместить весь скрипт там, если хотите, и сохраните его во внешнем файле).

Поделиться
0

Используйте "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');
Поделиться
0

Вы не выполняете 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';
}
Поделиться
  • 0
    запустилась функция запуска <body onload = "start"> </ body>
  • 0
    События mouseenter и mouseleave имеют меньшую поддержку браузера, чем их кузены mouseover и mouseout .
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню