Слайдер для сайта | JavaScript (без jQuery)

Карусель изображений (возможности, код)

Орангутан Пёс Мишки
  1. плавная смена фото,
  2. подстраивается под любой экран монитора (не адаптивный, а резиновый, что лучше),
  3. нет нареканий с точки зрения SEO: изображение поисковые роботы видят, alt прописан,
  4. удобен для пользователей (юзабилити):
    • при наведении на слайдер смена картинок приостанавливается и возобновляется только когда курсор мышки выведен за периметр слайдшоу,
    • при клике по кнопке выбора фотографии, прекращается автоматическая смена рисунков,
    • выделен активный (текущий) пункт, легко сориентироваться как найти нужное изображение,
    • обозначено общее количество картинок,
    • не перегружен дополнительными элементами: миниатюрами, таймером до смены слайда, значком паузы,
  5. простой и легкий код.
Код слайдшоу
<!-- HTML -->
<div id="raz">
  <img src="http://1.bp.blogspot.com/-rMnW9I5lal0/Ue96vOUnXuI/AAAAAAAAD8M/YQd22BfQG90/s00/obeziana.jpg" alt="Орангутан"/>
  <img src="http://4.bp.blogspot.com/-S2btlKknLJw/T0a8Nb2m-II/AAAAAAAACv8/j3ZpxP0qSak/s00/pes.jpg" alt="Пёс"/>
  <img src="http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s600/mishki.jpg" alt="Мишки"/>
  <div>
    <button type="button" value="0">1</button>
    <button type="button" value="1">2</button>
    <button type="button" value="2">3</button>
  </div>
</div>

<style>
#raz {
  position: relative;
  max-width: 100%;  /* можно ограничить по ширине в любых единицах, в т.ч. px (необязательно) */
  max-height: 400px;  /* можно ограничить по высоте в любых единицах, в т.ч. px (необязательно) */
  overflow: hidden;  /* удалить, если нет max-width, max-height и outline у img */
}
#raz img {
  position: absolute;
  top: 0;
  left: 0;

  /* Версия 1: абзац для того, чтобы изображение было растянуто во весь слайдер */
  height: 100%;
  width: 100%;

  /* Версия 2: абзац для того, чтобы изображение сохранило свои пропорции и было по середине области слайдера. То есть нужно выбрать одну из версий в img */
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  outline: 300px solid #fff; /* для того, чтобы пропорциональные нижние картинки не были видны (необязательно) */

}
#raz div {
  position: relative;
  height: 0;
  margin-bottom: 60%; /* процент от ширины (тут есть калькулятор) */
  z-index: 3;
}
#raz img:nth-of-type(1) {
  z-index: 2;
}
#raz button:nth-of-type(1) {
  opacity: 0.4;
}
</style>

<script>
window.requestAnimationFrame = (function () { // для поддержки requestAnimationFrame всеми браузерами
        return window.requestAnimationFrame ||
               function (callback) {
                   return window.setTimeout(callback, 1000 / 60);
               };
})();
// функция слайдера
function slider(f, img, button, V, Vo) {
  var iii = 0,
      start = null,
      clear = 0;
  function step(time) {
    if (start === null) start = time;
    var progress = time - start;
    if (progress > V) {
      start = null;
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
        button[i].style.opacity = "1";
      }
      img[iii].style.zIndex = "1";
      iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
      img[iii].style.zIndex = "2";
      img[iii].style.opacity = "0";
      button[iii].style.opacity = ".4";
    } else if(img[iii].style.opacity != "") {
      img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
    }
    if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
  }
  requestAnimationFrame(step);
  f.onmouseenter = function() { if(clear == "0") clear = "1"; }  // при наведении на слайдер
  f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }  // курсор убран со слайдера
  for (var j=0; j<button.length; j++) {  // при нажатии кнопок
    button[j].onclick = function() {
      clear = "2";
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
      }
      img[this.value].style.zIndex = "2";
      img[this.value].style.opacity = "1";
      for (var k=0; k<button.length; k++) {
        button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
      }
    }
  }
}
// вызов функции слайдера
var f = document.getElementById('raz'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '5000', '1000');  // '5000' — скорость смены картинок, '1000' — скорость прозрачности
</script>

Слайдер контента

  1. всё то же самое, только происходит смена не картинок, а тега <a>, то есть присутствует поддержка ссылок. Рекомендуется от 3 до 7 слайдов, желательно с информацией о скидках, акциях, конкурсах. Если это важный элемент навигации, например, большой слайдер в шапке сайта, то следует при внедрении следить за CTR или изменением конверсии, так как по нему кликают мало. Сбербанк, скажем, делает кнопку "Узнать больше". Слайдер на главной странице Сбербанка
Код слайдшоу
<!-- HTML -->
<div id="dva">
  <a href="#1" id="dvaF"><img src="http://1.bp.blogspot.com/-rMnW9I5lal0/Ue96vOUnXuI/AAAAAAAAD8M/YQd22BfQG90/s00/obeziana.jpg" alt="Орангутан"/><strong>Заголовок 1</strong></a>
  <a href="#2"><img src="http://4.bp.blogspot.com/-S2btlKknLJw/T0a8Nb2m-II/AAAAAAAACv8/j3ZpxP0qSak/s00/pes.jpg" alt="Пёс"/><strong>Заголовок 2</strong></a>
  <a href="#3"><img src="http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s600/mishki.jpg" alt="Мишки"/><strong>Заголовок 3</strong></a>
  <div>
    <button type="button" value="0"></button>
    <button type="button" value="1"></button>
    <button type="button" value="2"></button>
  </div>
</div>

<style>
#dva,
#dva #dvaF {  /* все картинки будут той же высоты, что первая */
  position: relative;
  height: auto;
  z-index: 2;
}
#dva a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#dva img {
  /* можно прописать max-width и max-height */
  display: block;
  height: 100%;
  width: 100%;
}
#dva strong {  /* стиль текста, его помещать не обязательно строго снизу */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96%;
  padding: 2%;
  background: rgba(255,255,255,.8);
}
#dva div {  /* расположение кнопок */
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 3;
}
#dva button {  /* стиль кнопок */
  height: .8em;
  width: .8em;
  padding: 0;
  border: none;
  border-radius: 100%;
}
#dva button:nth-of-type(1) {
  opacity: 0.4;
}
</style>

<script>
  // скрипт тот же, только вызов функции изменить:
  var f = document.getElementById('dva'),
    a = f.getElementsByTagName('a'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
  slider(f, a, button, '5000', '1000');
</script>
http://wordstat.yandex.ru/#!/?words=%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80 http://wordstat.yandex.ru/#!/?words=%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D1%88%D0%BE%D1%83%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82
в f t
наверх ↑

20 комментариев:

Олеся Царёва
Код карусели у меня работает. Спасибо. А нельзя ли, чтобы при нажатии на картинку, она переносила в раздел блога?(переход по ссылке)
NMitra
См. слайдер контента. Это тоже самое, только со ссылками
Олеся Царёва
Меня устраивает слайдер в том виде, в каком карусель. Хочется именно в него добавить ссылки. Но в каком месте? Я только учусь и пока в основном методом тыка. Поэтому, не могли бы вы подсказать, после какой строчки надо вставлять и как должна выглядеть ссылка с тегами. Спасибо!
NMitra
В статье представлены стили без рамки. Вместо точек, можно использовать кнопки, если не нужны заголовки, удалите strong
См. http://jsfiddle.net/NMitra/ejybg3rr/
Олеся Царёва
Спасибо вам за ответ, я обязательно поэкспериментирую.
shnajzer
Отлично!
(Изменили-бы дизайн сайта, особенно представление кода.)
NMitra
Только недавно заметила, что pre копируется одной строкой в Хроме. В Мозиле с разрывом строк выходит, вполне удобно. Копируйте пока исходный код. Согласна, что кнопку нужно какую-нибудь приделать, чтобы в отдельном окне код выводил. Но учитывая, что я до сих пор никак Главную не изменю (года 3 эдак)...
NMitra
Только сейчас вспомнила, что и это не удобно в Хроме делать :( Спасибо за замечание, взяла на заметку!
Муслим Гасанов
Добрый день. Не могли бы Вы подсказать как использовать готовые формы. Источник здесь http://tympanus.net/codrops/2014/03/18/inspiration-for-item-transitions/ Спасибо.
NMitra
Добрый день. Если вы скачаете файлы и установите их на сайт через файловый менеджер или FTP доступ, то всё будет работать. Без программиста не обойтись, тут на пальцах не объяснишь.
Муслим Гасанов
Спасибо за ответ. Хотелось бы уточнить знаний html и css хватает или нужны знания js и php?
NMitra
Хватает. Тут больше пригодятся навыки работы с файлами: https://yandex.ru/search/?lr=51&text=%D0%BA%D0%B0%D0%BA%20%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%B8%D1%82%D1%8C%20%D1%84%D0%B0%D0%B9%D0%BB%D1%8B%20%D0%BD%D0%B0%20%D1%85%D0%BE%D1%81%D1%82%D0%B8%D0%BD%D0%B3
Муслим Гасанов
Все. Сам со всем разобрался)). Все оказалось легче чем казалось. Спасибо
NMitra
Отлично!
Unknown
всмысле скрипт тот же, только вызов изменить? не понятно...
Саша
у меня не работает. почему?(
NMitra
Это

// вызов функции слайдера
var f = document.getElementById('raz'),
img = f.getElementsByTagName('img'),
button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '5000', '1000'); // '5000' — скорость смены картинок, '1000' — скорость прозрачности

заменить на

// скрипт тот же, только вызов функции изменить:
var f = document.getElementById('dva'),
a = f.getElementsByTagName('a'),
button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, a, button, '5000', '1000');
NMitra
Саша, в каком браузере? На данной странице пример тоже не работает?
Саша
в хроме. здесь работает
NMitra
А где не работает?