Создаем простейший слайдер



Сегодня предлагаю заняться созданием слайдера.
Создавать слайдер будет при помощи языка JavaScript и библиотеки JQuery. Наш слайдер будет представлять сразу все материалы в маленьком размере и один – основной элемент – в большом размере. По нажатию на «маленький» элемент данный элемент будет становиться основным, т.е. «флаг» основного элемента будет переходить к выбранному элементу.
Также мы анимируем данный слайдер и сделаем смену «основной» картинки не только по щелчку, но и по времени.

Приготовления
Весь слайдер будет «находиться» в основном контейнере div. Дадим этому контейнеру id = ‘slider’ и определим в стилях его параметры. Например вот так:
  1. #slider {
  2.    width:880px;
  3.    height:300px;
  4.    margin:5px auto;
  5.    background-color:#979393;
  6.    cursor:pointer;
  7. }

This code was highlighted with code.xnim.ru

Почему мы ставим темный цвет заднего фона я объясню чуть позже. Здесь также очень важно число, определяющее ширину. Это число – весь допустимый размер слайдера. При кодировании остальной части слайдера необходимо наблюдать, чтобы мы не превысили данного значения.
Каждый «физический» элемент слайдера представим следующим образом:
  1. <div id="slide1" ref="Страница, на которую перейдем, нажав по активной картинке" class="slideDiv" >
  2.           <img class="slideItem slideMain" src="отображаемая картинка" / >
  3.          </div >

This code was highlighted with code.xnim.ru


Каждый элемент будет пронумерован по принципу id = slider+ порядковый номер элемента.

Для работы со стилями будем использовать классы. Определим следующие классы:
  1. .slideDiv { //Общий стиль для элемента слайдера
  2.    float:left;
  3. }
  4. .slideMain { //активный элемент слайдера
  5.    width:630px;
  6. }
  7. .slideItem { //общий стиль для картинки слайдера
  8.    height:300px;
  9. }
  10. .slideHide { //Стиль для неактивного элемента слайдера
  11.   
  12.    opacity:0.4;
  13.    width:50px;
  14. }
  15. .slideHide:hover
  16. {
  17.    opacity:0.6;
  18. }
  19. .slideMain:hover
  20. {
  21.    opacity:0.9;
  22. }

This code was highlighted with code.xnim.ru


Соответственно для контейнера используем slideDiv, для всех img будем использовать три оставшихся класса (прим: можно было обойтись без контейнера перед img, но было решено добавить их для создания отслеживаемой структуры элементов)
В итоге получаем код примерно такого содержания:
  1. <script type="text/javascript" src="slider.js" > </script >
  2.     <style type=''text/css'' >
  3.    #slider {
  4.    width:880px;
  5.    height:300px;
  6.    margin:5px auto;
  7.    background-color:#979393;
  8.    cursor:pointer;
  9. }
  10. .slideDiv {
  11.    float:left;
  12. }
  13. .slideMain {
  14.    width:630px;
  15. }
  16. .slideItem {
  17.    height:300px;
  18. }
  19. .slideHide {
  20.   
  21.    opacity:0.4;
  22.    width:50px;
  23. }
  24. .slideHide:hover
  25. {
  26.    opacity:0.6;
  27. }
  28. .slideMain:hover
  29. {
  30.    opacity:0.9;
  31. }
  32.     </style >
  33.       <div id="slider" >
  34.          <div id="slide1" ref="view.php?q=Navi" class="slideDiv" >
  35.           <img class="slideItem slideMain" src="Pic/Navi.png" / >
  36.          </div >
  37.          <div id="slide2" ref="view.php?q=BubblesWarBeta" class="slideDiv" >
  38.            <img class="slideItem slideHide" src="Pic/FieldBubble.jpg" / >
  39.          </div >
  40.          <div id="slide3" ref="view.php?q=Wallpapers" class="slideDiv" >
  41.            <img class="slideItem slideHide" src="/Pic/Wall.jpg" / >
  42.          </div >
  43.          <div id="slide4" ref="view.php?q=ChessB" class="slideDiv" >
  44.            <img class="slideItem slideHide" src="Pic/chess.jpg" / >
  45.          </div >
  46.          <div id="slide5" ref="view.php?q=HighLight" class="slideDiv" >
  47.            <img class="slideItem slideHide" src="Pic/highlight.jpg" / >
  48.          </div >
  49.           <div id="slide6" ref="view.php?q=GMP" class="slideDiv" >
  50.            <img class="slideItem slideHide" src="Pic/Player.jpg" / >
  51.          </div >
  52.       </div >

This code was highlighted with code.xnim.ru

Итак, все элементы классы определены, можно переходить к js содержимому.
Главной задачей js скрипта – это реакция на нажатие пользователя. А там, в зависимости активная картинка или нет – переход к другой странице сайта, либо анимация «перелистывания» слайдера
Так как мы сделали изображение внутри контейнера с классом sliderDiv, то поставим обработчик на его нажатие. Данный обработчик должен будет определить – является ли искомый элемент активным, если да, то сменить страницу, а иначе скрипт ищет предыдущий активный элемент (перебирая элементы по id: slider1,slider2 и т.д.) и меняет его на неактивный (анимируя), а выбранный элемент, наоборот, делает активным. Логика проста:
  1. $(".slideDiv" ).bind("click keypress" , function (event) {
  2.      var t = $(this);
  3.      if ($(''#'' + this.id + '' img'').hasClass(''slideMain'')) {
  4.            document.location = t.attr("ref" );
  5.         return;
  6.      }
  7.      var main = $(''.slideMain'');
  8.      main.animate(
  9.         {
  10.            width: ''50px'',
  11.            opacity: ''0.4''
  12.         }, 1000 , function () {
  13.            main.attr(''style'', "" );
  14.            main.addClass(''slideHide'');
  15.            main.removeClass(''slideMain'');
  16.         }
  17.         )
  18.      t = $(''#'' +this.id+'' img'');
  19.      t.animate(
  20.      {
  21.         width: ''630px'',
  22.         opacity: ''1''
  23.      }, 1000 , function () {
  24.         t.attr(''style'', "" );
  25.         t.addClass(''slideMain'');
  26.         t.removeClass(''slideHide'');
  27.      });
  28.    });

This code was highlighted with code.xnim.ru

Если мы попытаемся тестировать данный слайдер, то заметим, что нажимая сразу на несколько элементов слайдер ведет себя, мягко говоря не лучшим образом. Необходимо запретить работу, если на данный момент обрабатывается анимация. Так как JS не предполагает использование мьютексов, обойдемся переменной – флагом, если она равна false, то мы можем обрабатывать нажатия, если true – не можем:
  1. var processing = false;
  2. $(function () {
  3.    $(".slideDiv" ).bind("click keypress" , function (event) {
  4.      if (processing) return;
  5.     
  6.      processing = true;
  7.      var t = $(this);
  8.      if ($(''#'' + this.id + '' img'').hasClass(''slideMain'')) {
  9.        if (!timerClick)
  10.            document.location = t.attr("ref" );
  11.         processing = false;
  12.         return;
  13.      }
  14.      var main = $(''.slideMain'');
  15.      main.animate(
  16.         {
  17.            width: ''50px'',
  18.            opacity: ''0.4''
  19.         }, 1000 , function () {
  20.            main.attr(''style'', "" );
  21.            main.addClass(''slideHide'');
  22.            main.removeClass(''slideMain'');
  23.         }
  24.         )
  25.      t = $(''#'' +this.id+'' img'');
  26.      t.animate(
  27.      {
  28.         width: ''630px'',
  29.         opacity: ''1''
  30.      }, 1000 , function () {
  31.         t.attr(''style'', "" );
  32.         t.addClass(''slideMain'');
  33.         t.removeClass(''slideHide'');
  34.         processing = false;
  35.      });
  36.    });

This code was highlighted with code.xnim.ru


Теперь слайдер ведет себя правильно при нажатии кнопок.
Однако, хочется, чтобы не только пользователь мог нажимать на кнопки, но и активный элемент менялся со временем.
Поставим таймер, не забывая, что мы должны проверять, не случилось ли так, что пользователь выбрал элемент, на который переключает таймер, а также переводя счетчик в 0 при достижении максимально возможного значения элемента: (максимального индекса слайдера)
  1. var processing = false;
  2. var lastClicked = 1 ;
  3. var timerClick = false;
  4. $(function () {
  5.    $(".slideDiv" ).bind("click keypress" , function (event) {
  6.      if (processing) return;
  7.     
  8.      processing = true;
  9.      var t = $(this);
  10.      if ($(''#'' + this.id + '' img'').hasClass(''slideMain'')) {
  11.        if (!timerClick)
  12.            document.location = t.attr("ref" );
  13.         processing = false;
  14.         return;
  15.      }
  16.      var main = $(''.slideMain'');
  17.      main.animate(
  18.         {
  19.            width: ''50px'',
  20.            opacity: ''0.4''
  21.         }, 1000 , function () {
  22.            main.attr(''style'', "" );
  23.            main.addClass(''slideHide'');
  24.            main.removeClass(''slideMain'');
  25.         }
  26.         )
  27.      t = $(''#'' +this.id+'' img'');
  28.      t.animate(
  29.      {
  30.         width: ''630px'',
  31.         opacity: ''1''
  32.      }, 1000 , function () {
  33.         t.attr(''style'', "" );
  34.         t.addClass(''slideMain'');
  35.         t.removeClass(''slideHide'');
  36.         processing = false;
  37.      });
  38.    });
  39.    setInterval(function () {
  40.      timerClick = true;
  41.      $(''#slide'' + (++lastClicked)).click();
  42.      timerClick = false;
  43.      if (lastClicked == 6 )
  44.         lastClicked = 0 ;
  45.    }, 5000 );
  46. });

This code was highlighted with code.xnim.ru


Данный код и реализует представленный виджет. В заключении напишу пару слов, как реализуется анимация. Так как положение и размеры определяются у элементов классами, то в анимации используем данные, равные значениям классов, к которым будем приводить эти элементы. После завершения анимации удаляем значение style у элемента и добавляем\\удаляем у элемента необходимые классы.
Темный фон необходим для эффекта затемнения. Дело в том, что при анимации в данном слайдере я меняю opacity – прозрачность. Соответственно, если необходимо сделать «осветление» элемента задаем белый фон, если необходимо затемнить элемент задаем темный фон.
2013-02-27