<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ротатор нескольких изображений на JavaScript

Ротатор нескольких изображений на JavaScript

Описание: Я уже писал про ротатор изображений на JavaScript, однако, меня попросили написать скрипт ротатора нескольких изображений на JavaScript. Я решил выполнить эту просьбу, так как такой скрипт может пригодиться многим. Разумеется, можно улучшить данный скрипт, сделав плавное изменение изображений, тогда получится уже очень интересное слайд-шоу на JavaScript.

Результат:

Коты Собаки

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  var counter = 0;
  var delay = 3000; // Время показа слайда в миллисекундах
  var path = "images/"; // Путь к картинкам
  var cats = new Array("cat_1.jpg", "cat_2.jpg", "cat_3.jpg"); // Названия файлов 1-го ротатора
  var dogs = new Array("dog_1.jpg", "dog_2.jpg", "dog_3.jpg"); // Названия файлов 2-го ротатора
  function rotatorMany() {
    document.getElementById("rotator_many_1").src = path + cats[counter];
    document.getElementById("rotator_many_2").src = path + dogs[counter];
    counter++;
    if (counter == cats.length) counter = 0;
    setTimeout(rotatorMany, delay);
  }
</script>

Код HTML (вставлять между тегами <body onload="rotatorMany()"> и </body>):

<table style="text-align: center;">
  <tr>
    <td>Коты</td>
    <td>Собаки</td>
  </tr>
  <tr>
    <td>
      <img src="images/javascript/cat_1.jpg" id="rotator_many_1" alt="" />
    </td>
    <td>
      <img src="images/javascript/dog_1.jpg" id="rotator_many_2" alt="" />
    </td>
  </tr>
</table>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (22):

katushka katushka 05.12.2012 21:41:45

Классно привлекает внимание! Чуть позже буду использовать данный код, только чуть переделаю.

Ответить

Margo Margo 07.12.2012 10:31:31

А у меня не работает...В чем причина????? картинки все в нужной папке images/javascript/картинка.jpg вот код: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <script type="text/javascript"> var counter = 0; var delay = 3000; // Время показа слайда в миллисекундах var path = "images/"; // Путь к картинкам var cats = new Array("cat_1.jpg", "cat_2.jpg", "cat_3.jpg"); // Названия файлов 1-го ротатора var dogs = new Array("dog_1.jpg", "dog_2.jpg", "dog_3.jpg"); // Названия файлов 2-го ротатора function rotatorMany() { document.getElementById("rotator_many_1").src = path + cats[counter]; document.getElementById("rotator_many_2").src = path + dogs[counter]; counter++; if (counter == cats.length) counter = 0; setTimeout(rotatorMany, delay); } </script> </head> <body> <table style="text-align: center;"> <tr> <td>Коты</td> <td>Собаки</td> </tr> <tr> <td> <img src="images/javascript/cat_1.jpg" id="rotator_many_1" alt="" /> </td> <td> <img src="images/javascript/dog_1.jpg" id="rotator_many_2" alt="" /> </td> </tr> </table> </body> </html>

Ответить

Admin Admin 07.12.2012 10:39:47

var path = "images/"; // Путь к картинкам - отредактируйте это.

Ответить

Margo Margo 07.12.2012 10:51:56

а что в нем не так?

Ответить

Admin Admin 07.12.2012 10:55:54

У Вас же путь images/javascript/, но написано "images/" в скрипте.

Ответить

Margo Margo 07.12.2012 10:58:39

var path = "images/javascript/"; я так сделала, картинки все-равно не меняются=(

Ответить

Margo Margo 07.12.2012 11:00:30

я уже и сразу в массиве пробовала путь прописывать, все-равно не работает))

Ответить

Admin Admin 07.12.2012 15:26:41

Код HTML (вставлять между тегами <body onload="rotatorMany()"> и </body>). Обратите внимание на onload.

Ответить

Margo Margo 07.12.2012 16:06:03

ураааааааа) спасибо)) работает)

Ответить

wid wid 19.01.2013 11:01:38

подскажите вот картинка коты как зделать картинку чтоб ссылка на ней работала куда что подставить

Ответить

Admin Admin 19.01.2013 16:21:24

Чтобы картинка была ссылкой, можно сделать так: <a href="#"><img src="images/cat_1.jpg" alt="" /></a>

Ответить

barasyuk barasyuk 31.01.2013 16:49:07

Здравствуйте Михаил. Мне нужно поместить на одну страничку Ротатор нескольких изображений и Ротатор изображений, тоисть нужно чтоб на одной страничке было два слайд шоу, в прицепе я это сделав соединившы этот код <body onload="imageRotator(0); rotatorMany()"> Вот код странички: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Документ Без Имени</title> <script type="text/javascript"> var array = new Array( "slide_1.jpg", "slide_2.jpg", "slide_3.jpg", "slide_4.jpg", "slide_5.jpg", "slide_6.jpg", "slide_7.jpg", "slide_8.jpg", "slide_9.jpg", "slide_10.jpg", "slide_11.jpg", "slide_12.jpg", "slide_13.jpg", "slide_14.jpg", "slide_15.jpg", "slide_16.jpg" );//массив с путями к картинкам var delay = 2000; //задержка в миллисекундах function imageRotator(i) { var image = document.getElementById("rotator"); image.src = array[i]; i++; if (i == array.length) i = 0; setTimeout("imageRotator(" + i + ")", delay); } </script> <script type="text/javascript"> var counter = 0; var delay = 20000; // Время показа слайда в миллисекундах var path = ""; // Путь к картинкам var cats = new Array("slide_2.1.jpg", "slide_2.2.jpg", "slide_2.3.jpg"); // Названия файлов 1-го ротатора var dogs = new Array("slide_3.1.jpg", "slide_3.2.jpg", "slide_3.3.jpg"); // Названия файлов 2-го ротатора function rotatorMany() { document.getElementById("rotator_many_1").src = path + cats[counter]; document.getElementById("rotator_many_2").src = path + dogs[counter]; counter++; if (counter == cats.length) counter = 0; setTimeout(rotatorMany, delay); } </script> </head> <body onload="imageRotator(0); rotatorMany()"> <p> <img style="margin: 0 auto;" id = 'rotator' src = 'slide_16.jpg' alt = 'Ротатор изображений' width = '1000' height = '330' /> </p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <table style="text-align: center;"> <tr> <td>Коты</td> <td>Собаки</td> </tr> <tr> <td> <img src="slide_2.2.jpg" id="rotator_many_1" alt="" /> </td> <td> <img src="slide_3.2.jpg" id="rotator_many_2" alt="" /> </td> </tr> </table> <p>&nbsp;</p> </body> </html> Но есть одна проблема все картинки меняются одновременно, не смотря на то что я установил разные значения времени показа слайда 2000 и 20000 миллисекунд. подскажите пожалуйста как решить эту проблему?

Ответить

Admin Admin 31.01.2013 18:35:54

Переменную delay надо переименовать, например, в delay_1 и delay_2.

Ответить

barasyuk barasyuk 31.01.2013 18:48:50

Получилось, Большое вам спасибо Михаил.

Ответить

barasyuk barasyuk 31.01.2013 19:44:09

Можете подсказать какой добавить код чтоб была задержка смены изображений, например var time_out = 1- но он не работает.

Ответить

Admin Admin 31.01.2013 20:35:50

Запустить первый раз функцию не при загрузке, а через некоторое время. Через setimeout() будет удобнее всего.

Ответить

barasyuk barasyuk 01.02.2013 00:51:31

Не работает вставил код, и почему то слайды не меняются, как правильно сделать?: <script type="text/javascript"> var counter = 0; var delay_2 = 5000; // Время показа слайда в миллисекундах var setimeout(5) var path = ""; // Путь к картинкам var cats = new Array("slide_2.1.jpg", "slide_2.2.jpg", "slide_2.3.jpg"); // Названия файлов 1-го ротатора var dogs = new Array("slide_3.1.jpg", "slide_3.2.jpg", "slide_3.3.jpg"); // Названия файлов 2-го ротатора function rotatorMany() { document.getElementById("rotator_many_1").src = path + cats[counter]; document.getElementById("rotator_many_2").src = path + dogs[counter]; counter++; if (counter == cats.length) counter = 0; setTimeout(rotatorMany, delay_2); } </script>

Ответить

Admin Admin 01.02.2013 10:58:10

Убрать из body нужно onload, в конце страницы добавить вызов settimeout(500000, rotatorMany()); Через 500 секунд после загрузки начнётся показ слайдов.

Ответить

Hoto Hoto 12.03.2013 16:07:14

Добрый день! А как сделать плавный переход между изображениями, не меняя код html? В начале статьи ссылка дана, но там изображения в html код добавлены, это мне не особо подходит(

Ответить

Admin Admin 12.03.2013 16:50:42

Конкретно под Вашу задачу нет скрипта. А вот, как делается плавность, здесь можно посмотреть: http://myrusakov.ru/javascript-slide-image.html

Ответить

kruty kruty 20.08.2013 19:36:08

Якщо більше картинок і зменшити час буде відео.

Ответить

timid timid 31.08.2015 22:33:46

Классный ротатор, то что нужно, не подскажете как правильно сделать ротатор на 9 картинок с разным временем показа...

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.