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

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

05.08.2010 19:47 Автор/источник: Den1xxx

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

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

admin	07:26:55 25 Август 2010
	Что ж, будем продолжать.

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

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

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

Гость	10:54:16 09 Декабрь 2010

Ссылки

Поиск

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

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

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

RSS фиды

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

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

Комментарии