Как сделать управляемое пользователем слайд-шоу на веб-странице

Я учу себя, как создавать веб-страницы. В моем коде у меня есть слайд-шоу в верхней части. Это автоматически меняет картинки. Я хочу изменить эту функцию, чтобы она изменяла изображение только при нажатии. Я хочу стрелки на обеих сторонах изображения (предыдущая и следующая кнопки). Как бы я поступил так? Вот мой код: HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <!--This header links the html and css file.-->
    <link type="text/css" rel="stylesheet" href="StyleSheet1.css" />
    <title>First One!</title>
    <link href='http://fonts.googleapis.com/css?family=Signika:400,700,600' rel='stylesheet' type='text/css'>

</head>

<body>
    <!-- SCM Music Player http://scmplayer.net -->
    <script type="text/javascript" src="http://scmplayer.net/script.js"
            data-config="{'skin':'skins/scmOrange/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'Rigamortus','url':'https://www.youtube.com/watch?v=sBvngg87998'}]}"></script>
    <!-- SCM Music Player script end -->
    <script type="text/javascript">
    var image1 = new Image()
    image1.src = "http://the305.com/blog/wp-content/uploads/2014/06/kendrick.jpg"
    var image2 = new Image()
    image2.src = "http://youheardthatnew.com/wp-content/uploads/2012/10/kendrick-lamar-complex-cover.jpg"
    </script>

    <img src="kendrick.jpg" name="slide" width="400" height="400" />
    <script type="text/javascript">
        var step = 1;
        function slideit() {
            document.images.slide.src = eval("image" + step + ".src")
            if (step<2)
                step++
            else
                step=1
            setTimeout("slideit()",2500)
        }
        slideit()
    </script>

    <link type="text/css" rel="stylesheet" href="StyleSheet1.css" />
    <div class="firsthalf">
        <h1>THIS IS THE WORLD OF KENDRICK LAMAR</h1>

        <!--links to music videos/drop-down-->
        <div class="menu">
            <ul><a href="http://www.youtube.com/watch?v=LuIUqIkDMY8"> She Needs me</a></ul>
            <ul><a href="https://www.youtube.com/watch?v=nLCqSMDEQsA">Swimming Pools</a></ul>
            <ul><a href="http://www.youtube.com/watch?v=sBvngg87998">Rigamortus</a></ul>
            <select>
                <option value="KDOT2">King</option>
                <option value="KDOT3">B/W</option>
                <option value="KDOT1">Complex</option>
            </select>
        </div>

        <img src="http://api.ning.com/files/ea4x8ggFHeL55kmzdIlO2E4lRQNnC*pvkD6nlB9cwVdAgUE8IIO5hhWVrhwbRI59GfJYpxySVIplT7VWsaLTq5BqRL7-WVFG/kendrick3lr_1.jpg" />
    </div>
</body>
</html>

CSS:
body {
    font-family: 'Signika', sans-serif;
    background-color: #f3871f;
    text-align: center;
}

.firsthalf h1 {
    border: 5px solid black;
}

.menu ul {
    display: inline;
}

Thank you!
Источник

2 ответа

Во-первых, я рекомендую ставить точки с запятой после каждого оператора javascript. Это часто решает проблемы.

Во-вторых, способ заставить его скользить, когда пользователь нажимает кнопку, использует следующую логику: когда пользователь нажимает кнопку назад, уменьшите шаг на 1. Когда пользователь нажимает кнопку вперед, увеличьте шаг на 1.

После каждого из приведенных выше операторов запустите функцию slideIt() без тайм-аута и оператора if. Не забудьте поставить оператор if перед document.images.slide.src, чтобы учесть ситуации, когда шаг равен 3 или 0.

Это должно заставить его работать.

Источник

Попробуйте комментировать setTimeout(); как это:

// setTimeout("slideit()",2500);

или же

/* setTimeout("slideit()",2500); */

Утвержденные высказывания не будут выполняться. Оператор setTimeout () указывает вашему сценарию выполнить метод "slideit()" через 2500 миллисекунд.

Чтобы добавить функцию щелчка, добавьте следующее в ваш скрипт:

function changeSlide(direction) { 
    step+=direction;
    slideit();
}

а затем из HTML сделать ссылки для управления слайд-шоу:

<a onclick="changeSlide(-1)" href="#">go back</a>
<a onclick="changeSlide(1)" href="#">go forward!</a>

Также в будущем вы должны ставить точку с запятой в конце каждого оператора в вашем скрипте. Вам не нужно, но это хорошая практика программирования.

Надеюсь это поможет!

Источник
Другие вопросы по тегам