SEO продвижение сайтов

Пишем слайдер на JavaScript

Пишем слайдер на JavaScript

В этой статье мы напишим работающий слайдер на чистом JavaScript без использования библиотек, только JS, HTML и CSS -поехали!

Подготовьте подходящие картинки в папке img, под статьёй есть slider-na_js.rar архив примера, его можно скачать и использовать.

Создаем файл HTML - index.html

<!DOCTYPE html><html dir="ltr" lang="ru-ru">
<head>
<title>СЛАЙДЕР</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head><body

<div class="slider">
<div class="fotos">
<div class="active"><img src="/img/Fon-1.jpg"><div>Привет!!!</div></div>
<div><img src="/img/Fon-2.jpg"><div>Можно делать подписи</div></div>
<div><img src="/img/Fon-3.jpg"></div>
<div><img src="/img/Fon-4.jpg"></div>
<div><img src="/img/Fon-5.jpg"></div>
<div><img src="/img/Fon-6.jpg"></div>
<div><img src="/img/Fon-7.jpg"></div>
</div>
<div class="bottom">
<span class="back">Вперед</span>
<span class="next">Назад</span>
</div>
</div>
<script src="/js.js"></script>

</body></html>

Создаем файл CSS - style.css

* {margin:0; padding:0;}
.okr4, .slider .fotos>div, .bottom span
{
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-o-border-radius:4px;
}

/*СЛАЙДЕР*/
.slider {
width:650px;
margin:10px auto;
}

/*Блоки слайдов*/
.slider .fotos {
height:370px;
position:relative;
}

/*Блок слайда: Фото+текст*/
.slider .fotos>div {
width:650px;
height:360px;
border:1px solid #666;
overflow:hidden;
position:absolute;
opacity:0;
transition: opacity 1s; /*Плавное изменение*/
}

/*Активный блок слайда*/
.slider .fotos>div.active {
opacity:1;
}

/*Картинка слайда*/
.slider .fotos img {
width:100%;
display:block;;
}

/*Надпись на слайде*/
.slider .fotos>div>div {
z-index:10;
}

/*Кнопки*/
.bottom{text-align:center;}
.bottom span {display:inline-block; border:1px solid #666; margin:10px 30px; width:60px; padding:3px 10px; cursor:pointer;}
.bottom span:hover {background:#ccc;}
.bottom .back {}
.bottom .next {}


/*Выравнивание блока в нутри блока*/
.viravn, .slider .fotos img, .slider .fotos>div>div {
position: absolute;
top:50%; left:50%;
margin-right:-50%;
transform:translate(-50%, -50%);
}

Создаем файл JavaScript - js.js

var bat_back=document.querySelector('.slider .bottom .back');
var bat_next=document.querySelector('.slider .bottom .next');

var div_fotos=document.querySelectorAll('.slider .fotos>div'); /*Получаем все фото*/
var i=0; /*Индекс массива фото*/

/*Клик по кнопке назад*/
bat_back.onclick=function()
{
div_fotos[i].className=''; // Удаляем
class i--;

if (i<0){
{
i=div_fotos.length-1;
}

div_fotos[i].className='active'; // Добавляем class active
}

/*Клик по кнопке вперед*/
bat_next.onclick=function()
{
div_fotos[i].className=''; // Удаляем class
i++;

if (i>=div_fotos.length)
{
i=0;
}

div_fotos[i].className='active'; // Добавляем class active
}

Скачать slider-na_js.rar архив примера можно здесь.

Автор: Алехин Геннадий (14.04.2018)

Добавить комментарий


Защитный код
Обновить

Ошибки в тексте выделить и Ctrl+Enter


Расскажи о нас друзьям

Интересные статьи

Женщины о себе...

Женщина о себе - женский юмор

1. Женщина сказала - Женщина сделала! Если Женщина сказала и не сделала, значит, Женщина по-шу-ти-ла.

2. Умная девушка всегда знает, когда включить дуру.

3. Я вся такая легкая, такая воздушная, такая неземная, такая смелая, неотразимая... Короче, пьяная я сегодня!

4. Женская логика: "Лучше по-хорошему скажи, иначе я сама додумаю, хуже будет!"

5. Счастье - это когда ты ходишь в его футболке, без косметики, с нелепым хвостиком на голове и для него ты самая красивая на Земле!

6. Решила по дому мужскую работу сделать сама, легла на диван, смотрю телевизор. Тяжело, не спорю, но надо...

7. Тридцать - это те же двадцать, только более ухоженная, самостоятельная и уверенная в себе!

Подробнее...

Создание и SEO продвижения сайта в интернете

Бюджет создания сайта определяется индивидуально и составляем ~30т.р. (+или-). Срок выполнения 2-4 недели, всё зависит от сложности сайта и взаимодействия с клиентом. Обычно бывают задержки со стороны клиентов.

Верстка сайта производится сразу в двух вариантах:

  • Для обычных компьютеров (лэптопов)
  • Для мобильны устройств (планшетов, смартфонов)
Подробнее...

Статистика женщин и мужчин на 2016г.

Статистика женщин и мужчин на 2016г.

Все мы, конечно, слышали весёлую и популярную когда-то песенку про то, что "...на десять девчонок по статистике девять ребят..." и, что женщин больше, а мужчин не хватает.

А вот, как реально обстоят дела по официальной статистике за 2016 год, взятой с официального сайта www.gks.ru - Федеральная служба государственной статистики.

И так: таблица 1.2. Женщины и мужчины по возрастным группам

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить