• Страница 1 из 1
  • 1
Форум » Веб-разработка » JavaScript — скрипты » Скрипт текстового слайдера (Как сделать простой слайдер на JavaScript без jQuery)
Скрипт текстового слайдера
workman
Воскресенье, 18 Февраля 2018 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Хорошо подойдет для афиш или отзывов на различных сайтах. Декларативный слайдер, что использует переходы CSS3, который позволяет вам поворачивать список исправленных размещенных текстовых материалов с помощью щелчка или автоматически.

Как обычно, сначала надо по месту добавить html
Код
<div id="text_slide1">Содержимое текстового блока №1</div>
<div id="text_slide2">Содержимое текстового блока №2</div>
<div id="text_slide3">Содержимое текстового блока №3</div>
<div id="text_slide4">Содержимое текстового блока №4</div>
<div id="text_slide5">Содержимое текстового блока №5</div>

В нижнюю часть страниц сайта подключаем
Код
<script type="text/javascript">  
var text_slide_cur=0;
function showtext_slide(){
    $('#text_slide'+(text_slide_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);
    setTimeout(hidetext_slide, 3000);
}
function hidetext_slide(){
    $('#text_slide'+(text_slide_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000,function(){showtext_slide();});
    text_slide_cur=(text_slide_cur+1)%5;
}
$(document).ready(function() {
    showtext_slide();
})
</script>

Чтобы все заработало правильно, как обычно, нужно добавить стилей.
Код
#text_slide1, #text_slide2, #text_slide3, #text_slide4, #text_slide5{
    position: absolute;
    left: 0px;
    opacity:0;
}

ну и конечно же смотрим демо пример работы


Сообщение отредактировал
workman - Понедельник, 19 Февраля 2018, 13:13
Страна: (RU)
Форум » Веб-разработка » JavaScript — скрипты » Скрипт текстового слайдера (Как сделать простой слайдер на JavaScript без jQuery)
  • Страница 1 из 1
  • 1
Поиск: