Разработка, создание и продвижение сайтов в Гомеле - Создание простейшего слайдера для сайта

Итак, мы поставили себе целью сделать простейший слайдер для переключения контента на 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>

Вот что получилось:

Оформление есть.

Но переключатель пока не работает - нет кода.

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 строчек!

Жду Ваших комментариев!

Дата 2010-08-05 20:47:21

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

Вы не залогинены!

admin	2010-08-25 08:26:55
	Что ж, будем продолжать.

Гость	2010-08-22 14:11:13
	А как в этот слайдер эффекты добавить - ну там медленное возникновение следующего слайда, например?

Логин:
Пароль:
Запомнить меня

Имя пользователя:

Гость	2010-12-09 10:54:16

Ссылки

Поиск

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

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

RSS фиды

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

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

Комментарии