Простой рецепт слайдера (слайдшоу) на jquery

Слайдер изображений или же чего-нибудь другого на скорую руку.

Для начала html каркас


< div id="slideshow">
< div>здесь какой-то текст< /div>
< div>здесь что-то другое< /div>
< div>можно вставить даже картинку< /div>
< /div>

Затем немного javacsript магии…

        $(document).ready(function(){
            $("#slideshow > div:gt(0)").hide();
            setInterval(function() {
                $('#slideshow > div:first')
                    .fadeOut(0)
                    .next()
                    .fadeIn(500)
                    .end()
                    .appendTo('#slideshow');
            },  3000);
        });

Вуаля! Простой слайдер готов.

Демо для просмотра: https://jsfiddle.net/mnmv1zny/

Приятного аппетита.

Простой рецепт слайдера (слайдшоу) на jquery: 2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *