Слайдер на 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="http://red-book-cms.ru/"><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>











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

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

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