<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Ротатор изображений на JavaScript с кнопками

Ротатор изображений на JavaScript с кнопками

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

Результат:

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

<script type="text/javascript">
  var array = new Array(
    "Foto1.jpg",
    "Foto2.jpg",
    "Foto3.jpeg"
  );//массив с путями к картинкам
  var i = 0;
  function left() {
    var image = document.getElementById("rotatorbutton");
    i--;
    if (i < 0) i = array.length - 1;
    image.src = array[i];
  }
  function right() {
    var image = document.getElementById("rotatorbutton");
    i++;
    if (i == array.length) i = 0;
    image.src = array[i];
  }
</script>

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

<table>
  <tr>
    <td>
      <input type = 'button' name = 'left' value = '<' onclick = 'left()' />
    </td>
    <td>
      <script type = 'text/javascript'>
        document.write("<img id = 'rotatorbutton' src = '" + array[0] + "' alt = 'Ротатор изображений с кнопками' width = '200' height = '200' />");
      </script>
    </td>
    <td>
      <input type = 'button' name = 'right' value = '>' onclick = 'right()' />
    </td>
  </tr>
</table>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

webmaster webmaster 19.05.2012 00:32:54

почему у меня более 3 картинок не меняет? что сделать чтобы больше 3х перелистывал?

Ответить

Admin Admin 19.05.2012 00:37:30

Добавить ещё значений в массив array.

Ответить

webmaster webmaster 19.05.2012 00:53:53

document.write("<img id = 'rotatorbutton' src = '" + array[5] + "' alt = 'Ротатор изображений с кнопками' wid............... типо так чтоль????? где 5 стоит сейчас? или здесь???? var array = new Array( "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg" );//массив с путями к картинкам

Ответить

Admin Admin 19.05.2012 01:18:41

Массив правильно изменили, а вот остальное трогать не надо было.

Ответить

webmaster webmaster 19.05.2012 01:26:01

понял. спасибо)

Ответить

kminas kminas 02.07.2012 21:20:48

Спасибо, в коде разобрался, хотя хотелось бы смену картинок без кнопки, нажатием на картинку, но это не главное. Главное, что картинки без подписи. Можно ли сделать, что бы была всплывающая подсказка, либо под/над снимком подпись, которая менялась бы вместе со снимком?

Ответить

Admin Admin 02.07.2012 21:46:36

Да, для этого достаточно использовать атрибут title для каждого тега img.

Ответить

kminas kminas 02.07.2012 22:29:31

Это ясно, но куда его в Вашем коде вставлять?

Ответить

Admin Admin 02.07.2012 23:10:27

Вы не знаете, что такое атрибут у тега?

Ответить

kminas kminas 02.07.2012 23:15:31

Вопрос не в этом. В Вашем коде есть тег img, но от не привязан к конкретной фотографии. Я не пойму, как при смене фотографии, менять атрибут. Может Вы имеете ввиду, что можно вместо "Foto1.jpg",... вставлять в массив тег с атрибутами?

Ответить

Admin Admin 02.07.2012 23:40:34

Всё правильно, нужно создать массив со всеми заголовками одновременно с путями к файлам и подставлять его вместе с путём.

Ответить

kminas kminas 03.07.2012 17:51:39

Спасибо!

Ответить

mixalka mixalka 05.12.2012 20:03:30

Подскажите как сделать чтоб при клике по изображению оно открылось на определённой странице?

Ответить

Admin Admin 05.12.2012 21:23:18

http://myrusakov.ru/javascript-image-newwindow.html

Ответить

mixalka mixalka 06.12.2012 07:34:04

Смысл моего вопроса состоит в том: нужно чтоб был "Ротатор изображений на JavaScript с кнопками" а при клике по изображению был переход на страницу. Там у вас открывается изображение в новом окне, а не страница. Т.е. надо объеденить эти два скрипта и клик сделать на страницу. Сам попробовал у меня не получилось. Не силён я в JavaScript. Помогите пожалуйста.

Ответить

Admin Admin 06.12.2012 17:37:41

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

Ответить

mixalka mixalka 08.12.2012 13:51:15

???

Ответить

Admin Admin 08.12.2012 19:59:56

Это чтобы при клике по изображению был переход по ссылке. Можно и так сделать: <a href="image.jpg"><img src="image.jpg" alt="" /></a>

Ответить

mixalka mixalka 09.12.2012 08:21:28

Вы сами хоть пробовали так делать? Когда в var array = new Array( "Foto1.jpg", "Foto2.jpg", "Foto3.jpeg" заменяю <a href="page.html"><img src="Foto1.jpg" alt="" /></a> и т.д. вообще всё перестаёт работать.

Ответить

Admin Admin 09.12.2012 10:53:42

Так ведь надо думать, что делаете. Я показал основу, а исправление скрипта - Ваше дело. Если не знаете JavaScript, то забудьте об этом, изучайте его сначала, а потом пишите скрипты.

Ответить

@spr@m @spr@m 27.03.2013 00:03:01

Добрый вечер. Скрипт четко работает, но валидатор ругается: "Error document type does not allow element "img" here <script type = 'text/javascript'> document.write("<img id = 'rotatorbutton' src = '" + array[0] + "' alt = 'Ротатор изображений с кнопками'/>"); </script>

Ответить

Admin Admin 27.03.2013 04:26:04

http://myrusakov.ru/valid-javascript.html

Ответить

midi63 midi63 03.06.2013 17:49:22

Как поменять цвет у кнопки?? Очень надо! Серый сливается с фоном.

Ответить

Admin Admin 03.06.2013 18:12:46

Через CSS свойство background-color.

Ответить

midi63 midi63 03.06.2013 18:15:09

пробовал к тегу <td> не получилось.. к какому тегу нужно применить?

Ответить

Admin Admin 03.06.2013 18:16:40

К кнопке, а она, видимо, тег <input>

Ответить

midi63 midi63 03.06.2013 18:21:02

ура покрасилась! спасибо!!

Ответить

ilyadenisovid ilyadenisovid 16.10.2013 07:11:51

А как сделать, чтобы перелистывалось по 5 картинок, например сначала выводлится с 1-5, потом с 6-10, и так далее.

Ответить

Admin Admin 16.10.2013 11:45:50

Надо полностью менять алгоритм. Не вижу проблем, если знаете JavaScript, если не знаете, то рекомендую это: http://srs.myrusakov.ru/javascript

Ответить

vladimir125 vladimir125 12.03.2014 15:21:33

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

Ответить

tikkiwiki tikkiwiki 27.03.2014 11:29:57

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

Ответить

zai zai 23.08.2014 15:00:03

можно ли определение массива сделать с помощью - function ShowFolderFileList(folderspec) { var fso, f, fc, s; fso = new ActiveXObject('Scripting.FileSystemObject'); f = fso.GetFolder(folderspec); fc = new Enumerator(f.files); s = ''; for (; !fc.atEnd(); fc.moveNext()) { s += fc.item(); s += ' '; } return(s); }

Ответить

wan_no_91 wan_no_91 16.12.2014 05:02:44

Добрый вечер. Подскажите как стелать ротатор как здесь http://rozetka.com.ua а именно <div class="big-promo float-lt" id="big-promo"> зарание благодарен

Ответить

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