<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

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

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

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

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

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

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

Ротатор изображений на JavaScript

Ротатор изображений на JavaScript

Описание: Сегодня я представляю Вашему вниманию очень простой, но часто используемый скрипт - "Ротатор изображений на JavaScript". Несмотря на всю его простоту, он применяется при показе слайдов, а это уже встречается очень часто. Вдобавок, с помощью ротатора изображений можно менять баннеры (либо какие-нибудь фотографии из галереи изображений), что также активно применяется.

Результат:

Ротатор изображений

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

<script type="text/javascript">
  var array = new Array(
    "images/javascript/Foto1.jpg",
    "images/javascript/Foto2.jpg",
    "images/javascript/Foto3.jpeg"
  );//массив с путями к картинкам
  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>

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

<p>
  <img id = 'rotator' src = '' alt = 'Ротатор изображений' width = '150' height = '150' />
</p>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

sergkosm sergkosm 11.04.2013 23:57:01

Вот он, скрипт, который был мне нужен. А то пытался сделать тем методом: http://myrusakov.ru/document-javascript.html#comment_6370. Забыл просто, что автоматическая смена картинок - это слайдшоу называется.

Ответить

URF007 URF007 05.06.2013 17:10:11

Подскажите пожалуйста как сделать так чтобы при клике по изображению осуществлялся переход на заданную страницу?

Ответить

Admin Admin 05.06.2013 23:24:25

<a href="page.html"><img src="img.jpg" alt="" /></a>

Ответить

lev_100rus lev_100rus 07.09.2013 18:21:39

Измените код и поставьте в src хотя бы "#", а то код невалидный получится

Ответить

andrejpan andrejpan 23.03.2014 19:09:38

Здравствуйте, Михаил. Вставил на страницу код ротатора изображений, однако возникла проблема: как сделать, чтобы каждая картинка была ссылкой на определённую страницу. Адреса картинок прописаны в скрипте. Как туда вставить ссылки? Подскажите, пожалуйста.

Ответить

alexandrdante alexandrdante 23.03.2014 20:01:22

добавляйте действие onclick к каждой картинке.Там ссылку переход на страницу. Должно прокатить

Ответить

andrejpan andrejpan 23.03.2014 20:02:47

А как это прописать здесь: var array = new Array( "images/javascript/Foto1.jpg", ?

Ответить

tikkiwiki tikkiwiki 13.05.2014 10:39:30

Здесь никак, Вам выше написали решение. Создаете событие onclick к каждой картинке.

Ответить

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