Форум

green275 · #1 (**permalink**) 27.01.2016, 10:01

Начинающий нуп. Вот решил написать очень простой слайдер. Хотелось бы реализовать автоматическую смену слайдов. Как это реализовать? Всем спасибо!

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript для начинающих</title>
    <meta charset="utf-8">
<script type="text/javascript" src="core.js"></script>
<link rel='stylesheet' href="style.css">
</head>
<body>
    <div id = "photo">
        <img src="img/1.jpg">
    </div>
    <div class="manage">
        <span id = "prev">prev</span>
        <span id = "next">next</span>
    </div>
</body>
</html>

window.onload = function(){

    var i = 1;
        document.getElementById("next").onclick = function()
        {
            if (i != 2)
                i++;
            document.getElementById("photo").innerHTML = '<img src ="img/'+ i +'.jpg">';
        }

        document.getElementById("prev").onclick = function()
        {
            if(i != 1)
                i--;
            document.getElementById("photo").innerHTML = '<img src ="img/'+ i +'.jpg">';
        }

 }

рони · #2 (**permalink**) 27.01.2016, 12:42

Сообщение от green275

Хотелось бы реализовать автоматическую смену слайдов.

насобирайте массив url картинок и меняйте src по таймеру, выбирая из этого массива следующий элемент, если такого нет , то первый и так бесконечно.

green275 · #3 (**permalink**) 28.01.2016, 13:21

Можно поподробнее, с примером кода. Заранее благодарен.

рони · #4 (**permalink**) 28.01.2016, 15:05

Сообщение от green275

Хотелось бы реализовать автоматическую смену слайдов.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript для начинающих</title>
    <meta charset="utf-8">
<script>
window.addEventListener("load", function() {
    var b = ["http://javascript.ru/forum/image.php?u=45816&dateline=1453878207", "http://javascript.ru/forum/image.php?u=7416&dateline=1372796129", "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"],
        c = b.length,
        a = 0,
        d = document.querySelector("#photo img");
    (function e() {
        d.src = b[++a, a %= c];
        window.setTimeout(e, 1E3)
    })()
});

</script>
<link rel='stylesheet' href="style.css">
</head>
<body>
    <div id = "photo">
        <img src="http://javascript.ru/forum/image.php?u=45816&dateline=1453878207">
    </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript