Слайд шоу html код

Узнайте, как создать Адаптивное слайд-шоу с помощью CSS и JavaScript.

Слайд-шоу / Карусель

Слайд-шоу используется для циклического использования элементов:

Создание слайд-шоу

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Стиль кнопки "Далее" и "назад", текст заголовка и точки:

Пример

/* Slideshow container */
.slideshow-container <
max-width: 1000px;
position: relative;
margin: auto;
>

/* Hide the images by default */
.mySlides <
display: none;
>

/* Next & previous buttons */
.prev, .next <
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
>

/* Position the "next button" to the right */
.next <
right: 0;
border-radius: 3px 0 0 3px;
>

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover <
background-color: rgba(0,0,0,0.8);
>

/* Caption text */
.text <
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>

/* Number text (1/3 etc) */
.numbertext <
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>

/* The dots/bullets/indicators */
.dot <
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>

.active, .dot:hover <
background-color: #717171;
>

/* Fading animation */
.fade <
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
>

Шаг 3) добавить JavaScript:

Пример

var sl >showSlides(slideIndex);

Читайте также  Программа для телефона асус на компьютер

// Next/previous controls
function plusSlides(n) <
showSl >>

// Thumbnail image controls
function currentSlide(n) <
showSl >>

function showSlides(n) <
var i;
var sl );
var dots = document.getElementsByClassName("dot");
if (n > sl > if (n for (i = 0; i

Автоматическое слайдшоу

Чтобы отобразить Автоматическое слайд-шоу, используйте следующий код:

Пример

var sl >showSlides();

function showSlides() <
var i;
var sl );
for (i = 0; i sl > sl ;
setTimeout(showSlides, 2000); // Change image every 2 seconds
>

Несколько слайд-шоу

Пример

var sl >/* Class the members of each slideshow group with different CSS classes */
var sl ]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) <
showSl >>

коротко и полезно о веб-разработке

Как создать слайд-шоу с помощью CSS и HTML

В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.

Что мы собираемся делать

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

Подготовка изображений

Первое, что нам понадобится это картинки. В этом примере я использовал изображения пейзажей, но это может быть и рекламный контент, в общем, все, что вам нравится. Я сделал основное изображение размером 500х300 , и табы размером 75х125 . Я просто взял размер основного изображения, затем разделил высоту на желаемое количество табов (в моем случае 300/4 = 75 ), так я вычислил высоту табов. Ширина табов взята произвольно, я просто изменил размер основного изображения до высоты равной 75 , и ширина получилась, пропорциональна заданной высоте, в нашем случае 125 .

Читайте также  Просканировать компьютер на вирусы доктор веб бесплатно

Теория

В теории все это работает довольно просто. Мы будем использовать тэги a, для перехода от одного изображения к другому. Это очень похоже на ссылку «наверх», которая прокручивает страницу до самого верха, по клику. Единственное различие в том, что картинки будут прокручиваться в контейнере div , вместо прокручивания вверх и вниз по странице.

HTML, сам по себе, очень простой. Что касается табов, это всего лишь маркированный список, с изображениями внутри якорных тэгов. Все просматриваемые изображения, заключены в div (это очень важно, поскольку мы будем прятать все лишние картинки с помощью overflow , и отображать только выделенное изображение). К тому же, каждая картинка также заключена в div и в якорный тэг. Эти div -ы можно использовать как контейнеры, в том случае если вы захотите использовать фоновое изображение вместо обычной картинки, они на самом деле не нужны в этом примере, мы просто оставим их, если вдруг передумаем.

Вот такой должен быть html:

С помощью CSS, мы настроим табы таким образом, что они будут располагаться слева от основного окна и располагаться друг на друге. Мы также установим 40-% прозрачность табов в обычном состоянии, и 100% -прозрачность при наведении мыши. Конечно, наиболее важная часть CSS относится к div -у, содержащему изображения. Мы просто должны убедиться, что свойство overflow установлено в hidden .

Вот такой должен быть CSS:

Соединяем все вместе

Последнее, что нам осталось сделать, это соединить HTML и CSS вместе. Вы, конечно, можете изменить внешний вид слайд-шоу и количество табов. Самое важное, то, что вам нужно запомнить из этого руководства – идею использования якорных тэгов в качестве средства переключения изображений.

Читайте также  Промокоды на танки world of tanks

Вот так выглядит код, собранный вместе:

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо – поделиться ссылкой в социальных сетях:

Вам приходилось когда-нибудь делать на сайте слайд-шоу? Думаю да, именно поэтому я решил написать эту статью. Иногда мне приходится делать это на сайтах, но я пока не знаю js и обычно ищу, скачиваю исходники и пытаюсь их настроить.

Пару дней назад, когда я делал портфолио другу на его сайте, я опять встретился с этой проблемой. И мне пришла в голову мысль. Я видел несколько статей где изменяют стандартные стили radio и checbox, с помощью тега label. Вот я и решил сделать вот такое странное «формное» слайд-шоу. Когда я сделал что-то типа слайд-шоу_без_js_v1.0 я осознал всю простоту этого кода. Правда автопереключение на следующую картинку наверное на html, css не сделать, но кому-то это и не нужно, а кому нужно, я всё устроил на JS. Точнее не совсем я, пришлось погуглить чуть-чуть.

И как я обещал, тем кому нужно авто переключение:

В начале s1, s2, s3 — это id radio. В конце 10000 — это время между переключениями.

A теперь сюрприз для php-программистов, чтобы им не надо было каждый файл вписывать в страницу, а просто закинуть в папку (супер модернизация):

Вот и всё, если у кого что-то не работает из-за моей ошибки, пишите в комментариях, исправлю (у меня всё работает :).

Ссылка на основную публикацию
Adblock detector