Всё о web

Для чайников и не только


простой слайдер без jquery

Март 3, 2015

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

Мы попытаемся подробно рассказать как работает слайдер.

shema

Это наша принципиальная схема. Есть дисплей- выделен синим, внутри дисплея создан слой с картинками. Ширина дисплея устанавливается ровно в ширину картинки. И если двигать в стороны слой с картинками, то на дисплее они будут меняться как в старом проекторе.

html код слайдера будет следующий:

  <div class="ssdisplay" id="ss1">
    <div class="ssimages">
      <img src="img/slide1.jpg">
      <img src="img/slide2.jpg">
      <img src="img/slide3.jpg">
    </div>
  </div>

div class="ssdisplay" - это и есть дисплей, а div class="ssimages" - слой- контейнер для изображений.

Текущий результат:

s1

Пока не похоже на нашу схему. Значит нужно научиться в зависимости от количества изображений устанавливать размер контейнера.

<script>
function myss(ssid,width,height,pause)//id элемента, ширина, высота, пауза
{
  var ss = document.getElementById(ssid);//получаем корневой слой слайдшоу
  var dspwidth=width;//ширина 
  var dspheight=height;//высота
  var imgcount=ss.children[0].getElementsByTagName('img').length;//подсчитываем количество изображений
  ss.style.width=dspwidth+'px';//устанавливаем ширину и высоту для дисплея
  ss.style.height=dspheight+'px';
  ss.children[0].style.width=(imgcount*dspwidth)+'px';//и слоя с изображениями
  ss.children[0].style.height=dspheight+'px';
}

window.onload = function(e)//после загрузки страницы запускаем слайдер
  {
  myss('ss1',900,300,2000);
  }
</script>

Теперь результат такой:

s2

Ширину высчитали мы правильно, но есть один нюанс, так как в html части каждое изображение пишется с новой строки, то между ними есть невидимый пробел- символ переноса каретки. Из-за него образуются отступы между элементами. Чтобы от него избавиться добавим стиль font-size:0px; - символ останется, но его размер станет равным 0. Заодно установим относительное позиционирование и анимацию:

.ssdisplay > .ssimages
  {
  position:relative;
  font-size:0px;
  transition:left 0.5s;
  }

s3

Теперь более похоже. Задаём дисплею стиль overflow:hidden; и он перестаёт показывать содержимое за пределами его размеров.

.ssdisplay
  {
  overflow:hidden;
  }

Доделываем наш javascrip. При инициализации выставляем левую координату для изображений в 0

ss.children[0].style.left='0px';

Если этого не сделать, то анимация фактически начнётся с 3 слайда.

Пишем таймер для запуска анимации:

  iid=window.setInterval(function()//устанавливаем интервал смены изображений
    {
    var minleft=-1*(dspwidth*(imgcount-1));//вычисляем максимальное смещение
    if(minleft>=parseInt(ss.children[0].style.left))//проверяем не пора ли перемотать в начало
      {
      ss.children[0].style.left='0px';//если пора - перематываем
      }else//либо
      {
      ss.children[0].style.left=(parseInt(ss.children[0].style.left)-900)+'px';//сдвигаем слой на ширину изображения
      }
    }, pause);

Целиком наш javascript выглядит так:

<script>

function myss(ssid,width,height,pause)
  {
  //Начальная настройка .firstChild;
  var ss = document.getElementById(ssid);//получаем корневой слой слайдшоу
  var dspwidth=width;//ширина 
  var dspheight=height;//высота
  var imgcount=ss.children[0].getElementsByTagName('img').length;//подсчитываем количество изображений
  ss.style.width=dspwidth+'px';//устанавливаем ширину и высоту для дисплея и слоя с изображениями
  ss.style.height=dspheight+'px';
  ss.children[0].style.width=(imgcount*dspwidth)+'px';
  ss.children[0].style.height=dspheight+'px';
  ss.children[0].style.left='0px';//устанавливаем координату в 0  
  
  iid=window.setInterval(function()//устанавливаем интервал смены изображений
    {
    var minleft=-1*(dspwidth*(imgcount-1));//вычисляем максимальное смещение
    if(minleft>=parseInt(ss.children[0].style.left))//проверяем не пора ли перемотать в начало
      {
      ss.children[0].style.left='0px';//если пора - перематываем
      }else//либо
      {
      ss.children[0].style.left=(parseInt(ss.children[0].style.left)-900)+'px';//сдвигаем слой на ширину изображения
      }
    }, pause);
  }

window.onload = function(e)
  {
  myss('ss1',900,300,2000);
  }
</script>

Открыть пример в новом окне.

Получился простой слайдер без jquery, но не лишенный недостатков. К примеру если использовать картинки разной ширины то дисплей будет захватывать часть соседних изображений. Мы не добавили элементы управления, а в случае использования большого количества изображений, или изображений большого размера, будут проблемы с производительностью.

Все эти проблемы уже решены в готовый плагинах. Используйте их, не изобретайте велосипед.



Комментарии

Оставить комментарий:

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