- Автоматический слайдер на CSS
- Видео слайдер
Карусель изображений (возможности, код)
- плавная смена фото,
- подстраивается под любой экран монитора (не адаптивный, а резиновый, что лучше),
- нет нареканий с точки зрения SEO: изображение поисковые роботы видят, alt прописан,
- удобен для пользователей (юзабилити):
- при наведении на слайдер смена картинок приостанавливается и возобновляется только когда курсор мышки выведен за периметр слайдшоу,
- при клике по кнопке выбора фотографии, прекращается автоматическая смена рисунков,
- выделен активный (текущий) пункт, легко сориентироваться как найти нужное изображение,
- обозначено общее количество картинок,
- не перегружен дополнительными элементами: миниатюрами, таймером до смены слайда, значком паузы,
- простой и легкий код.
Код слайдшоу
<!-- 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>
Слайдер контента
Простая фотогалерея для сайта
Слайдер ссылок: кнопки прокрутки на CSS
Карусель изображений с миниатюрами на CSS
- всё то же самое, только происходит смена не картинок, а тега
<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>
20 комментариев:
См. http://jsfiddle.net/NMitra/ejybg3rr/
(Изменили-бы дизайн сайта, особенно представление кода.)
// вызов функции слайдера
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');