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

Итак, мы поставили себе целью сделать простейший слайдер для переключения контента на 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_slidecur_slide=1;//после последнего перейдём к первому;
if (cur_slide<1cur_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_slidecur_slide=1;
if (
cur_slide<1cur_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_slidecur_slide=1;
if (
cur_slide<1cur_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.