Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Гадания на таро 0 >>
Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

Все мои клиенты получают первоначальное обучение и ежегодное обновление системы совершенно бесплатно.

RSS фиды

RSS Статьи
RSS Клиентам
RSS Новости
RSS Файлы
RSS Форум

Разделы → Статьи → Разработка сайтов → Создание простейшего слайдера для сайта

Итак, мы поставили себе целью сделать простейший слайдер для переключения контента на javascript, без использования jQuery.

Сначала вопрос - почему без jQuery? Зачем так сурово?
Ну, как минимум для этого есть несколько причин:

1. Использование jQuery предполагает, что нужно будет использовать библиотеку весом не менее 200 кб. А как мы убедимся немного ниже, ВЕСЬ наш конечный файл весит в 100 раз меньше.
2. Это быстрее работает. Следствие п.1
3. И в конечном итоге, в целях обучения.winking

1. Постановка задачи.

1.1. Создать слайдер, переключающий по кругу содержимое трёх элементов, заключенных в блок <div>

1.2. Детализация.
Слайдер будет иметь 2 кнопки сверху и 1 окно вывода.
При загрузке в окне вывода показывается элемент 1.
Нажатие кнопки вправо должно активировать следующий элемент, если элементов больше нет - переходить к первому. Нажатие кнопки влево должно активировать предыдующий элемент, если элементов больше нет - переходить к последнему.

2. Решение.

2.1. Напишем "костяк" html файла.
Это просто:
Код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html;charset=windows-1251"/>

</head>

<body>

</body>

</html>
2.2. Теперь добавим html офомление, обработчики навесим потом.
Предварительно найдите где-нибудь (или сделайте сами) стрелки влево и вправо.
Вставим между тегами body наш слайдер:
Код: 

<div id="slider">

<div id="slide1">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

<div id="slide2">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

<div id="slide3">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

</div>
Блоки <div> по умолчанию занимают 100% ширины.
Надо уменьшить их. Зададим внешнему блоку 700px ширины (width),
добавим границу (border) и отступ (margin).
У нас 3 одинаковых слайда, и мы не увидим, как они переключаются.
Разукрасим их для наглядности разным цветом (background-color).
Добавим стили в блок <head>:
Код: 

<style>

#slider{

width:700px;

border:1px dotted #f69;

margin:10px;

}

#slide1{

display:inline;

background-color:#f33;

}

#slide2{

display:hidden;

background-color:#6f6;

}

#slide3{

display:hidden;

background-color:#99f;

}

</style>
Теперь над верхним блоком <div id="slider"> вставим стрелки влево-вправо
Код: 

<a href=""><img src="left.gif" alt="Налево"/></a>   

<a href=""><img src="right.gif"alt="Направо"/></a>
Вот что получилось:
gif
Оформление есть.
Но переключатель пока не работает - нет кода.

2.3. Код.

2.3.1. Напишем код обработчика. Добавим в <head>
Код: 

<script language="JavaScript">

var cur_slide,max_slide;//текущий слайд, количество всех;

max_slide=3; //количество слайдов

function show_slide(num) {//показывает слайд по номеру

cur_slide=num;

if (cur_slide>max_slide) cur_slide=1;//после последнего перейдём к первому;

if (cur_slide<1) cur_slide=max_slide;//перед первым 

for(var i=1;i<=max_slide;i++) document.getElementById('slide' + i).style.display='none';//скроем все;

document.getElementById('slide' + cur_slide).style.display='';//показать текущий слайд

}//конец функции

</script>
2.3.2. Чтобы код стартовал при загрузке документа, нужно добавить в тег <body>
Код: 

<body onLoad="cur_slide=1;show_slide(1);">
Тогда после загрузки страницы будет показываться слайд №1.

2.3.3. Теперь навесим обработчик на кнопки "Налево" и "Направо".
Для этого надо просто вызывать функцию show_slide при клике на картинки:
Код: 

<a href="#" onClick="show_slide(cur_slide-1)">

<img src="left.gif" alt="Налево" title="Налево"/>

</a> 

<a href="#" onClick="show_slide(cur_slide+1)">

<img src="right.gif"alt="Направо" title="Направо"/>

</a>
Всё, код готов.

3. Доработка. Подгонка под систему управления.
Что не нравится в этом коде, на первый взгляд?

3.1. Если использовать этот код в составе системы управления сайтом,
доступ к тегам head и body будет затруднён.
Значит, надо выносить яваскрипт из этих тегов.
Вынесем код в конец страницы, чтобы он загружался
после блока <div id="slider">
После закрытия последнего </div> добавляем:
Код: 

<script language="JavaScript">

var cur_slide,max_slide;

max_slide=3;

cur_slide=1;//добавим инициализацию переменной при загрузке 

function show_slide(num) {

cur_slide=num;

if (cur_slide>max_slide) cur_slide=1;

if (cur_slide<1) cur_slide=max_slide;

for(var i=1;i<=max_slide;i++) document.getElementById('slide' + i).style.display='none';

document.getElementById('slide' + cur_slide).style.display='';

}

show_slide(1);//Вызываем показ первого слайда

</script>
3.2. Если адрес сайта будет динамическим, конструкция типа
<a href="#"> изменит адрес страницы, что недопустимо.
Перепишем:
Код: 

<a href="javascript:show_slide(cur_slide-1);">

<img src="left.gif" alt="Налево"/>

</a> 

<a href="javascript:show_slide(cur_slide+1);">

<img src="right.gif"alt="Направо"/>

</a>
Эта конструкция href="javascript: хоть и часто осуждается,
но работает под всеми браузерами.

3.3. Теги style при использовании системы управления тоже проблематично будет запихивать внутрь <head>
Значит, их нужно запихнуть внутрь тегов <div> используемых слайдов.
Кроме того, добавим границу вокруг слайдов
и ограничим ширину слайда в 700px:
Код: 

<div id="slider" 

style="width:700px;border:1px dotted #f69;margin:10px;">

<div id="slide1" style="background-color:#f33;">

................................................

</div>

<div id="slide2" style="background-color:#6f6;">

................................................

</div>

<div id="slide3" style="background-color:#99f;">

................................................

</div>

</div><!--Конец блока slider-->
Теперь код полностью готов:
Код: 

<center>

<a href="javascript:show_slide(cur_slide-1);"><img src="left.gif" alt="Налево"/></a>   

<a href="javascript:show_slide(cur_slide+1);"><img src="right.gif"alt="Направо"/></a>

<div id="slider" style="width:700px;border:1px dotted #f69;margin:10px;">

<div id="slide1" style="background-color:#f33;">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

<div id="slide2" style="background-color:#6f6;">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

<div id="slide3" style="background-color:#99f;">

ГЛАВНАЯ <br/><br/>

НОВОСТИ <br/><br/>

СТАТЬИ <br/><br/>

ГАЛЕРЕЯ <br/><br/>

ФОРУМ <br/><br/>

ССЫЛКА 

</div>

</div>

</center>

<script language="JavaScript">

var cur_slide,max_slide;

max_slide=3;

cur_slide=1;

function show_slide(num) {

cur_slide=num;

if (cur_slide>max_slide) cur_slide=1;

if (cur_slide<1) cur_slide=max_slide;

for(var i=1;i<=max_slide;i++) document.getElementById('slide' + i).style.display='none';

document.getElementById('slide' + cur_slide).style.display='';

}

show_slide(1);

</script>
Вот и всё готово.
Пример того, что получилось:
http://fromgomel.com/html/slider.html
Заметьте - сам исполняемый код на javascript занимает всего около 15 строчек!
Жду Ваших комментариев!
05.08.2010 19:47 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Комментарии

Гость
No avatar 		10:54:16 09 Декабрь 2010
bravo
admin
denis 		07:26:55 25 Август 2010
Что ж, будем продолжать.
Гость
No avatar 		13:11:13 22 Август 2010
А как в этот слайдер эффекты добавить - ну там медленное возникновение следующего слайда, например?

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.