Текстовый слайдер работающий на jQuery. Часто таким текстовым слайдером выводятся, например, отзывы о каком-то продукте или какие-то случайные фразы. Приме..."> Текстовый слайдер работающий на jQuery. Часто таким текстовым слайдером выводятся, например, отзывы о каком-то продукте или какие-то случайные фразы. Приме.....">
  • Всего на сайте: 1
  • Скрипты и шаблоны для uCoz

    Все для web мастера

    71
    материалов
    6
    комментария
    6/6
    тем на форуме
    34пользователя
      Web-Script.Ucoz.Net » Все для юкоз » Слайдер для ucoz

    Текстовый слайдер на jQuery


       слайдер с текстом, Текстовый слайдер, jQuery, слайдер на jQuery, текстовый слайдер для сайта

      Описание:

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

    Как обычно, сначала надо добавить 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>


    Каждому блоку нужно присвоить свой id. Это должно быть название text_slide и в конце цифра по порядку. По примеру видно как именно. Это очень Важно, потому как в скрипте jQuery, от этого будет зависеть правильность работы.
    В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, нужно сначала подключить jQuery библиотеку, если ее еще там нет

    Код
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


    Потом, после нее подключить уже сам скрипт текстового слайдера.

    Код
    <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>


    Чтобы все заработало правильно, как обычно, нужно добавить CSS - стили

    Код
    #text_slide1, #text_slide2, #text_slide3, #text_slide4, #text_slide5{
      position: absolute;
      left: 0px;
      opacity:0;
    }


    Тут тоже важно обратить внимание, что если будете добавлять или убирать лишние слайды, то в стилях через запятую укажите или удалите id. Настроить и добавить можете что хотите, все зависит от того, каким Вы хотите видеть слайдер. Думаю, если знакомы с СSS, то это не составит труда для Вас.

    Ниже смотрим результат


    Автор материала:
    ...
    Логин на сайте: ...
    Группа: ...
    Статус: ...
    О материале:
    Дата добавления материала: 10.03.2018 в 17:37
    Материал просмотрен: 634 раза
    Категория материала: Слайдер для ucoz

      

    Возможно вас заинтересует:




    голосов


    Всего комментариев: 1
    Обсуждение материала:
    Комментариев: 1
    0 ivashsovet
    26

    В 02:57, 23.12.2019 оставил(а) комментарий:
    Не нахожу , куда вставить стили.
    avatar

    Последние комментарии
    miqaelm6 10.03.2018 - 21:57



    Создать сайт вместе с uKit.com

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Онлайн никого нет