<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

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

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

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

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

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

Скрипт галереи + слайд-шоу на JavaScript

Скрипт галереи + слайд-шоу на JavaScript

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

Результат: Кликните по любой картинке из таблицы.

Главное изображение

Изображение 1
Изображение 1a Изображение 1b Изображение 1c
Изображение 2
Изображение 2a Изображение 2b Изображение 2c
Изображение 3
Изображение 3a Изображение 3b Изображение 3c

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

<script language = "JavaScript">
  var timer = null;
  var delay = 2000;
  var ar_src = new Array();
  function setBigImageSlide(group) {
    var group = document.getElementById(group);
    var images = group.childNodes;
    var src = new Array();
    var k = 0;
    for (var i = 0; i < images.length; i++) {
      if (images[i] instanceof HTMLImageElement) {
        src[k] = images[i].src;
        k++;
      }
    }
    ar_src = src;
    if (timer != null) clearTimeout(timer);
    imagesSlide(0);
  }
  function imagesSlide(i) {
    var image = document.getElementById("bigimgslide");
    image.src = ar_src[i];
    i++;
    if (i == ar_src.length) i = 0;
    timer = setTimeout("imagesSlide(" + i + ")", delay);
  }
</script>

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

<div>
  <p style = 'text-align: center;'>
    <img id='bigimgslide' src='images/javascript/space_1.jpg' height='150' alt='Главное изображение' />
  </p>
  <table style = 'margin: 0 auto;' border = '1'>
    <tr>
      <td>
        <img src = 'images/javascript/space_1.jpg' width = '100' onclick = 'setBigImageSlide("space")' alt = 'Изображение 1' />
        <div id="space">
          <img src = 'images/javascript/space_1.jpg' width = '100' style="display: none;" alt = 'Изображение 1a' />
          <img src = 'images/javascript/space_2.jpg' width = '100' style="display: none;" alt = 'Изображение 1b' />
          <img src = 'images/javascript/space_3.jpg' width = '100' style="display: none;" alt = 'Изображение 1c' />
        </div>
      </td>
      <td>
        <img src='images/javascript/flower_1.jpg' width='100' onclick='setBigImageSlide("flowers")' alt='Изображение 2' />
        <div id="flowers">
          <img src='images/javascript/flower_1.jpg' width='100' style="display: none;" alt='Изображение 2a' />
          <img src='images/javascript/flower_2.jpg' width='100' style="display: none;" alt='Изображение 2b' />
          <img src='images/javascript/flower_3.jpg' width='100' style="display: none;" alt='Изображение 2c' />
        </div>
      </td>
      <td>
          <img src='images/javascript/animal_1.jpg' width='100' onclick='setBigImageSlide("animals")' alt='Изображение 3' />
        <div id="animals">
          <img src='images/javascript/animal_1.jpg' width='100' style="display: none;" alt='Изображение 3a' />
          <img src='images/javascript/animal_2.jpg' width='100' style="display: none;" alt='Изображение 3b' />
          <img src='images/javascript/animal_3.jpg' width='100' style="display: none;" alt='Изображение 3c' />
        </div>
      </td>
    </tr>
  </table>
</div>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

№13 №13 14.11.2011 14:06:26

Здравствуйте, Михаил! Взяла этот скрипт, поменяла адрес картинок, и что-то у меня ничего не работает. Показывает галерею, и главную картинку, слайдов нет, и не работает функция перехода в галерее на другую картинку :( Подскажите что не так??

Ответить

Admin Admin 14.11.2011 14:11:32

Вы точно заменили только пути, быть может, Вы заменили весь тег <img>. Или может быть, случайно, где-то стёрли id. Здесь каждая строчка имеет огромное значение. А вообще возьмите этот скрипт, все картинки оставьте прежними и проверьте, чтобы она работал. Когда он заработает, начинайте потихоньку (не все сразу) заменять пути к картинкам.

Ответить

№13 №13 14.11.2011 23:01:43

Михаил, переписала все заново- не работает!

Ответить

Admin Admin 14.11.2011 23:03:12

Пришлите код на почту: myrusakov@gmail.com, всё должно работать, у меня же работает.

Ответить

sarcodin sarcodin 12.12.2011 14:47:34

Через JQuery можно сделать проще и покрасивее.

Ответить

Admin Admin 12.12.2011 16:31:07

Само JQuery - это уже не проще и некрасивее. Ради одного скрипта его глупо подключать, это слишком большая библиотека.

Ответить

sergeevna sergeevna 02.02.2012 16:14:30

Здравствуйте Михаил. Воспользовалась Вашим скриптом, но что то он у меня не работает. Подскажите пожалуйста, я меняю только пути к изображениям? Или здесь <img id='bigimgslide' src='images/javascript/space_1.jpg' height='150' alt='Главное изображение' Нужно что то поменять?

Ответить

Admin Admin 02.02.2012 16:18:05

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

Ответить

sergeevna sergeevna 02.02.2012 18:15:38

Изменять пути во второй части скрипта или в двух? И такой вопрос: я прописываю путь к изображениям которые находятся в папке images?

Ответить

Admin Admin 02.02.2012 18:17:17

Где они находятся, не знаю, это Вы должны знать. Пути надо везде менять, у каждого img.

Ответить

sergeevna sergeevna 02.02.2012 22:58:59

в двух частях кода?

Ответить

Admin Admin 02.02.2012 23:01:33

В HTML-коде.

Ответить

sergeevna sergeevna 02.02.2012 23:06:43

ясно.спасибо. А если у меня что-то не получится, можно Вас попросить помочь?

Ответить

Admin Admin 02.02.2012 23:09:02

Вы уже просите. Всё, что здесь нужно - это правильно прописать пути к изображениям, а также вставить в нужные места куски кода (в статье написано куда).

Ответить

sergeevna sergeevna 02.02.2012 23:40:17

Вы меня простите пожалуйста,но что-то я не то делаю наверно. Коды вставила куда Вы написали. Но ничего не отображается. Вот часть кода html: <div> <p style = 'text-align: center;'> <img id='bigimgslide' src='images/javascript/w/104.jpg' height='150' alt='Главное изображение' /> </p> <table style = 'margin: 0 auto;' border = '1'> <tr> <td> <img src = 'images/javascript/w/104.jpg' width = '100' onclick = 'setBigImageSlide("space")' alt = 'Изображение 1' /> <div id="space"> <img src = 'images/javascript/w/105.jpg' width = '100' style="display: none;" alt = 'Изображение 1a' /> <img src = 'images/javascript/w/106.jpg' width = '100' style="display: none;" alt = 'Изображение 1b' /> <img src = 'images/javascript/w/107.jpg' width = '100' style="display: none;" alt = 'Изображение 1c' /> </div> Подскажите пожалуйста, что не так?

Ответить

Admin Admin 02.02.2012 23:49:42

У Вас везде style="display: none;" - так быть не должно.

Ответить

sergeevna sergeevna 02.02.2012 23:53:35

Простите,а как правильно? Там то же нужно прописать путь?

Ответить

Admin Admin 03.02.2012 00:10:54

Там нужно, чтобы была группа изображений, первое изображение без display: none; и с onlick, а все остальные в данной группе с display: none; и без onclick.

Ответить

стас стас 26.02.2012 19:49:37

скрипт просто класс.но если вас не затруднит подскажите пожалуйста как его можно использовать не в одну полосу а в 2,3,4 и т.д.

Ответить

Admin Admin 26.02.2012 19:53:13

Тег <tr> новый создайте аналогичный тому, что уже имеется. Если с таблицами проблемы, то почитайте эту статью: http://myrusakov.ru/sozdanie-tablic-html.html

Ответить

стас стас 26.02.2012 20:01:17

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

Ответить

Admin Admin 26.02.2012 21:12:38

Здесь учатся, а не получают готовые скрипты. Если Вам нужны не знания, а именно готовые скрипты, то Вы ошиблись адресом. Вам нужно в google с запросом "скрипты javascript". Если нужны знания, то подумайте, как можно решить данную задачу. Если на это потребуется месяц, то ничего страшного, главное - результат.

Ответить

стас стас 26.02.2012 21:25:38

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

Ответить

Admin Admin 26.02.2012 21:30:48

Вот и доработайте практику. Полностью рабочий скрипт, по аналогии добавьте ещё один <tr>, и тогда будет ещё одна строка.

Ответить

стас стас 26.02.2012 21:44:45

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

Ответить

Admin Admin 26.02.2012 21:48:59

Добавляйте ещё <tr>. Сколько <tr> добавите, столько строк и будет. С Вами бесполезно разговаривать, ввиду того, что Вы вообще не понимаете, о чём я говорю. Я пытаюсь Вам рассказать об интегралах, а Вы не знаете и таблицы умножения. Изучайте HTML, CSS, потом JavaScript. Прямо с нуля, по порядку.

Ответить

люба люба 05.03.2012 22:47:42

Михаил,подскажите пожалуйста а можно ли сделать так чтобы картинка не сразу менялась а с начало шло описание картинки.и так после каждой.

Ответить

Admin Admin 05.03.2012 22:59:06

Можно, но писать придётся не так уж и мало, поэтому если знаете JavaScript, то справитесь, если нет, то не получится.

Ответить

люба люба 05.03.2012 23:07:27

я только учусь.а вы можете как нибудь объяснить как это сделать.

Ответить

Admin Admin 05.03.2012 23:18:53

В данном скрипте уже всё понятно. Просто надо каждую вторую итерацию вместо картинки выводить текст. Есть группа картинок, добавьте туда группу текста. И эту группу полностью проигрывайте. В скрипте же надо получать не только все изображения внутри родительского, но и все параграфы (если текст находится в теге <p>). А дальше вывести текущий элемент. Вот и всё.

Ответить

люба люба 07.03.2012 21:57:29

михаил добрый вечер.объясните пожалуйста почему в место альтернативного текста какой либо из картинок пишется текст главное изображение.

Ответить

Admin Admin 07.03.2012 22:00:41

Значит, Вы неправильно указали путь к изображению.

Ответить

люба люба 07.03.2012 22:10:24

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

Ответить

Admin Admin 07.03.2012 22:13:40

Этот текст задаётся в атрибуте alt.

Ответить

люба люба 07.03.2012 22:20:14

это я поняла.просто я делаю фото альбом и не все фото внесла.а для удобства указала только альтернативные тексты.но вместо них мне пишет " главное изображение".

Ответить

Folayt Folayt 06.04.2014 17:29:47

Возможно вы не указали альтернативу миниатюрам.

Ответить

люба люба 22.03.2012 09:34:40

Михаил здравствуйте.скажите пожалуйста,а можно в вашем скрипте сделать кнопку пауза.

Ответить

Admin Admin 22.03.2012 10:24:25

Можно, но нужно знать JavaScript.

Ответить

Venik33 Venik33 14.05.2012 11:25:49

Здравствуйте. У меня выдает 2 ошибки: На этой странице произошла ошибка сценария Строка 15 Символ 7 Ошибка 'HTMLimageElement'-определение отсутствует Код 0 URL file:///F:/Hefs/Фото.htm и На этой странице произошла ошибка сценария Строка 11 Символ 5 Ошибка требуется объект Код 0 URL file:///F:/Hefs/Фото.htm Подскажите, в чем проблема, пожалуйста.

Ответить

Admin Admin 14.05.2012 13:38:48

Указывайте относительные пути, а не мало того, что абсолютные, да ещё и от windows. Хуже ничего не придумать.

Ответить

Venik33 Venik33 14.05.2012 14:16:04

Извините, но у меня везде указаны относительные пути, а то что я указал в комментарии это URL адрес файла.

Ответить

Admin Admin 14.05.2012 14:22:42

Скрипт работает? Попробуйте в других браузерах.

Ответить

Venik33 Venik33 14.05.2012 14:23:18

Заработал непонятным образом! -_- но нужно чтобы работал в InternetExplorer, а там вот эта ошибка. Можете что-нибудь подсказать?

Ответить

Admin Admin 14.05.2012 14:28:15

У меня всё прекрасно работает в IE9.

Ответить

Venik33 Venik33 14.05.2012 14:30:18

Проверил в GoogleChrom работает только с нажатия на первую картинку в таблице, с чем это может быть связано?

Ответить

Admin Admin 14.05.2012 14:36:23

Скрипт начинает работать после нажатия на любую картинку, вначале он стоит на месте.

Ответить

juliamish juliamish 08.07.2012 20:06:06

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

Ответить

Folayt Folayt 06.04.2014 17:44:46

Подскажите как задать фиксированный размер изображения. пробовал через heigh, не работает. Или это нужно делать через css?

Ответить

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