Слайдер на JavaScript

Данная заметка содержит пошаговую инструкцию по использованию легковесного слайдера реализованного на одном только JavaScript, без использования JQuery и иных библиотек.

Слайдер на JavaScript

Скачать слайдер на JavaScript

1. Подключите к вашей веб-странице стиль слайдера и его клиентский скрипт:

<link type="text/css" rel="stylesheet" href="slider.css"> 
<script src="div_rotate.js" type="text/javascript"></script>

2. Объявите массив с картинками и ссылками на материалы вашего сайта, как видите можно задать интервал смены изображений в миллисекундах, в этом примере слайды будут меняться раз в 5 секунд:

<script type="text/javascript"> 
var divContent = new Array(); 

divContent[0] = "<a href=\"http://red-book-cms.ru\"><img src=\"slides/first-image.jpg\" alt=\"Первая картинка\" width=\"640\" height=\"220\"   /></a>"; 
divContent[1] = "<a href=\"#\"><img src=\"slides/second-image.jpg\" alt=\"Вторая картинка\" width=\"640\" height=\"220\"   /></a>"; 
divContent[2] = "<a href=\"#\"><img src=\"slides/third-image.jpg\" alt=\"Третья картинка\" width=\"640\" height=\"220\"   /></a>"; 

// Зададим интервал между сменой изображений:
var imageRotateInterval = setInterval("rotateDiv('fp_banners', false)", 5000); 
// Зададим поворот текущего ключа, иными словами сколько слайдов нужно пропускать за 1 обход:
var divRotateCurrentKey = 0; 
</script>

3. Впишите HTML разметку, — это всего лишь пара блочных элемента с идентификаторами CSS, ненумерованным списком и картинками:

<div id="imageRotateGroup">
  <ul>
    <li id="imageRotateIndex0" class="imageRotateIndexCurrent"><a href="javascript: showSpecificRotateDiv('fp_banners', 0)">1</a></li>
    <li id="imageRotateIndex1" class="imageRotateIndex"><a href="javascript: showSpecificRotateDiv('fp_banners', 1)">2</a></li>
    <li id="imageRotateIndex2" class="imageRotateIndex"><a href="javascript: showSpecificRotateDiv('fp_banners', 2)">3</a></li>
  </ul>
</div>
<div id="fp_banners">
  <a href="/"><img src="slides/first-image.jpg" alt="Первая картинка" width="640" height="220"></a>
</div>

Примечание. Данный легковесный слайдер с элегантным программным был извлечен мною с сайта http://dev.mysql.com.

Опубликовано 17-04-2013 в 21:31


Комментариев к записи: 2

  1. Ничего не понятно для новичка без CSS кода. Пожалуйста, добавьте его.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Администратор: к записи Что-то слишком дешево, подозрительно... »
  • Валерий: к записи Лучше, конечно, платный хостинг. Бесплатных полноц »
  • Администратор: к записи Нажмите на кнопку Скачать в статье. »
  • маша: к записи Ничего не понятно для новичка без CSS кода. Пожалу »
  • Администратор: к записи Почитайте информацию на http://javascript.ru/ »
  • Стас: к записи У меня вся страница пихается в #ajax-container »
  • id49788920: к записи Скрипт обрезает теги. Это возможно как-нибуть испр »

Статистика спама

Последние твиты