<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Плавная смена изображения в JavaScript

Плавная смена изображения в JavaScript

Описание: Сегодня будет очень интересный скрипт, позволяющий плавно сменять изображения. Огромным преимуществом данного скрипта плавной смены изображений на JavaScript - это кроссбраузерность (работает даже в IE6). Также не требуется библиотека JQuery, что редкость для подобных скриптов. Надеюсь, что он Вам придётся по вкусу. А все исходники скрипта далее в статье.

Результат:

Фото 1 Фото 2 Фото 3 Фото 4

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

<script type="text/javascript">
  var total_pics_num = 4; // колличество изображений
  var interval = 5000; // задержка между изображениями
  var time_out = 1; // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>

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

<div>
  <img src='slide_1.jpg' id="image_1" style="position: absolute;" />
  <img src='slide_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

sync.o sync.o 29.06.2011 21:48:25

Есть предложение, чтобы не возникало ошибок в стилях: var IE = 'v' == 'v'; // самый короткий способ определения IE - нашел на хабре if(IE) { document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; } else { document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_next).style.opacity = (100-opacity)/100; }

Ответить

sync.o sync.o 29.06.2011 21:49:18

Ну и конечно, для img тоже: <style> .image{opacity: 0;} </style> <!--[if IE]> <style> .image{filter: alpha(opacity=0);} </style> <![endif]-->

Ответить

sync.o sync.o 29.06.2011 21:50:04

В <body> пишем так: <div> <img src='slide_1.png' id="image_1" style="position: absolute;" /> <img src='slide_2.png' class = "image" id="image_2" style="position: absolute;" /> <img src='slide_3.png' class = "image" id="image_3" style="position: absolute;" /> <img src='slide_4.png' class = "image" id="image_4" style="position: absolute;" /> </div>

Ответить

Admin Admin 29.06.2011 22:00:33

Спасибо, но в данном случае это будет излишним, так как скрипт работает даже в IE6, а в более поздних версиях и подавно.

Ответить

sync.o sync.o 29.06.2011 22:48:27

Да просто консоль в firefox ругается. Предупреждение: Ошибка при анализе значения «filter». Потерянное объявление.

Ответить

pashara pashara 08.10.2011 15:56:29

Давно искал скрипт фотогаллереи =) Спасибо. Кстати, он скоее всего и на КПК работать будет (На WORD PRESS я поставил галлерею, а потом я был удивлён, что и на мобиле работает слаидшоу! =))

Ответить

№13 №13 11.11.2011 23:33:09

Михаил,я нашла на вашем сайте скрипт про галерею. Скажите а можно сделать так, что б при нажатии на маленькое фото появлялось большое в виде слайда с 2-3х фото - тоесть тоже самое фото в других ракурсах.И так каждая фотка в галерее.

Ответить

Admin Admin 11.11.2011 23:37:41

Да, можно. Поскольку в двух словах трудно объяснить, я напишу подобный скрипт к понедельнику и выложу его. Спасибо за идею для статьи!

Ответить

№13 №13 11.11.2011 23:41:54

!!!эх, если б могла разцеловала б!(может для этого тоже скрипт есть :) Спасибо вам большое!!!! Даже не представляете, как мне ваши уроки помогли!!! Столько информации в пустую перерыла, пока ваш сайт не нашла!!!

Ответить

Michele Michele 27.11.2011 19:16:44

Очень простенько , что и радует. Только на ucoz изображения смещаются в сторону при перелистывании. Как можно отцентровать их ?

Ответить

Admin Admin 27.11.2011 19:39:12

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

Ответить

Michele Michele 27.11.2011 23:01:39

Настроил всё ок . Спасибо ! Не очень разбираюсь в скриптах ,хотелось бы ссылки прикрепить .

Ответить

6apcuk 6apcuk 12.12.2011 20:01:33

Можно ли сделать чтобы данные картинки были фоном(тобишь что бы поверх их был текст)

Ответить

Admin Admin 12.12.2011 21:26:36

Да, можно. Делается это всё через CSS.

Ответить

6apcuk 6apcuk 13.12.2011 18:09:02

а можно как нибудь поподробнее)

Ответить

Admin Admin 13.12.2011 18:15:37

Можно, например, поднять контент ниже лежащий через margin-top выше, так чтобы он оказался поверх картинки. Но лучше будет изменить скрипт, заменив тег img на div с заданным width и height, полностью совпадающими с размерами картинки. Далее менять свойство background у div аналогично тому, как сейчас происходит с атрибутом src. А уже само содержимое (текст) пишите внутри этого div. Если не понимаете, то изучайте CSS.

Ответить

6apcuk 6apcuk 13.12.2011 18:20:15

Огромное спасибо! Отчасти усвоил, перевариваю остальное) Идея вашего сайта супер, сделано все ну очень хорошо, вы мне очень помогли.

Ответить

darkelza darkelza 17.12.2011 13:46:15

На iPhone скрипт первый раз прокручивает картинки нормально, после этого зависает последняя картинка и начинает накладываться на все остальные которые меняются с бешеной скоростью В андроиде все нормально видится - почему так?

Ответить

Admin Admin 17.12.2011 14:02:24

Я не работаю с iphone, поэтому не могу сказать почему так.

Ответить

medvedev-foto medvedev-foto 07.02.2012 01:04:12

Михаил, спасибо, за скрипт, у меня один вопрос а как мне данный "эффект плавной смены картинок" вставить в определённую ячейку, у меня простенький сайт на html(сам делаю)вписан в таблицы с ячейками. вверху ячейка-баннер, левая ячейка статичное фото, правая ячейка меняющиеся. И вот мне в эту ячейку надо вставить между тегами <td>...<td> файл со скриптом сделал внешним. насколько понял, надо всё то, что между тегов <div>...<div> у вас присвоить один id- <img id="pict" и его вставить между тегов <td>...<td>. Извините за ламерский вопрос)

Ответить

Admin Admin 07.02.2012 01:06:30

Не надо ничего присваивать, просто скопируйте весь код внутри <div> внутрь ячейки <td>.

Ответить

medvedev-foto medvedev-foto 07.02.2012 01:34:24

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

Ответить

Admin Admin 07.02.2012 11:50:44

Значит забыли какой-нибудь tr, td, table где-то закрыть или ещё что-то, проблема в вёрстке. Попробуйте для начала вставить любое одно изображение в свою ячейку.

Ответить

medvedev-foto medvedev-foto 07.02.2012 21:12:54

100 раз всё перепроверил по ячейкам, вот код (страница html и картинки файл js отдельным файлом) http://narod.ru/disk/39982686001/medvedev-studio.ru.rar.html Если не затруднит посмотрите, а то у же мозг "сломал", весь интернет облазал, но ответа не нашёл...Буду благодарен

Ответить

Admin Admin 07.02.2012 21:47:44

Не знаю, как Вы смотрели, но я эту ошибку за 5 секунд обнаружил. Как вот это можно было пропустить? <img src='images/head_6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> </td> <tr>

Ответить

medvedev-foto medvedev-foto 07.02.2012 23:58:33

да извиняюсь, этой <tr> не заметил, но проблема была в другом, сам решил вопрос, вот код надо вставить в div с relative а не просто в ячейки, и в конце заменить absolute на relative внизу код: <div style="position: relative"> <img src='images/head_1.jpg' id="image_1" style="position: absolute;" /> <img src='images/head_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> <img src='images/head_3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> <img src='images/head_4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> <img src='images/head_5.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> <img src='images/head_6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0);position: relative;" /> </div>

Ответить

burgundy burgundy 24.02.2012 14:26:55

Почему-то спустя некоторое время картинки начинают судорожно моргать. Обновляешь, все нормально. В чем может быть дело?

Ответить

Admin Admin 24.02.2012 14:39:49

В браузере. Исправить весьма затруднительно. Попробуйте запускать таймер, только когда на окне стоит фокус. Если JavaScript плохо знаете, то лучше поищите готовый аналогичный скрипт на JQuery, они чуть ли не сотни раз больше, но зато там нет морганий.

Ответить

vizavi vizavi 24.03.2012 13:47:02

Михаил, не подскажете, можно сделать так, чтобы на одной странице работали 2 блока картинок одновременно?

Ответить

Admin Admin 24.03.2012 13:55:18

Можно, но у них должны быть разные id.

Ответить

vizavi vizavi 24.03.2012 14:07:02

ID поставил разные: в 1-м блоке с id="image_1" до id="image_4", во втором с id="image_5" по id="image_8", но во втором блоке картинки так и не меняются.

Ответить

Admin Admin 24.03.2012 14:08:48

Скрипт тоже правьте, посмотрите код, изучите его, вникните в его работу и исправьте. Без знаний JavaScript здесь не обойтись, сразу говорю.

Ответить

Ahmad Ahmad 18.07.2012 06:53:18

Спасибо Вам за скрипты ! Они мне очень помогают. Но я читал ваш ответь на как разместит верхнюю картинку на таблицу , и сделал так как Вы ответили но не получается. Может подскажите как разместить изображения по центру чтобы при увеличение масштаб браузера изображения остался по центру! За ранее спасибо! Я применяю скрипты для баннера

Ответить

Admin Admin 18.07.2012 14:53:59

Используйте выравнивание по центру для нужного элемента.

Ответить

gnom99 gnom99 28.07.2012 21:16:39

Доброе... Я заметил одну закономерность. Когда оставляешь страницу с данным скриптом и переходишь на другу закладку, после возвращение на нашу страницу со скриптом изображения начинают быстро перелистываться. Искал в JavaScript-е причину, но не нашел. Решил обратиться к вам за помощью. Браузер Mozilla

Ответить

Admin Admin 28.07.2012 23:30:30

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

Ответить

gnom99 gnom99 28.07.2012 23:41:14

Жаль. Ну ладно. Так тоже круто! Главное, что он весит мало. Спасибо.

Ответить

Ирина Ирина 20.09.2012 15:30:26

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

Ответить

Admin Admin 20.09.2012 17:02:32

Можете сделать перенаправление по ссылки при событии onClick, тоже через javascript.

Ответить

Studenets Studenets 26.11.2012 21:11:10

МИХАИЛ! КАК ВСЕ ЭТО ВЫРОВНЯТЬ ПО ЦЕНТРУ ЭКРАНА???????????????????? Подскажите пожалуйста!!!

Ответить

Admin Admin 26.11.2012 21:18:09

<div style="text-align: center;">

Ответить

Studenets Studenets 27.11.2012 00:26:15

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

Ответить

Admin Admin 27.11.2012 09:09:11

Там выбора-то нет. Это нужно заменить <div> на <div style="text-align: center;">.

Ответить

MLushik MLushik 29.11.2012 20:55:29

Скажите пожалуйста, как вывести этот скрипт в хедере, что поменять в файле header.php? Обычная свтавка скрипта выводит смену картинок на страницы сайта, а шапка вообще пропадает. Спасибо.

Ответить

Admin Admin 29.11.2012 20:58:00

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

Ответить

MLushik MLushik 29.11.2012 23:05:52

HTML знаю, просто допереть не могу, что именно нужно, уже много всего перепробовано...

Ответить

Pandalol Pandalol 15.01.2013 17:07:09

Мне потребовалось сделать две таки плавающие части картинок,но работает только одна,возможно ли как-то это исправить?

Ответить

Admin Admin 15.01.2013 19:34:32

Надо использовать разные id для разных блоков, плюс отдельные функции для каждого блока. Без знаний по JavaScript не сможете это сделать, поскольку переписывать прилично придётся.

Ответить

Pandalol Pandalol 26.01.2013 21:30:57

<script type="text/javascript"> var total_pics_num = 4; var interval = 5000; var time_out = 1; var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity--; var k = i + 1; var images_now = 'images_' + i; var images_now2 = 'image_' + i; if (i == total_pics_num) k = 1; var images_next = 'images_' + k; var images_next2 = 'image_' + k; document.getElementById(images_now).style.opacity = opacity/100; document.getElementById(images_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(images_next).style.opacity = (100-opacity)/100; document.getElementById(images_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; document.getElementById(images_now2).style.opacity = opacity/100; document.getElementById(images_now2).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(images_next2).style.opacity = (100-opacity)/100; document.getElementById(images_next2).style.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval ( function() { i++; if (i > total_pics_num) i=1; fade_to_next(); }, interval ); </script> Вот такое решение,вставляется в боди,и можно делать две подряд.

Ответить

shisha shisha 21.02.2013 00:49:48

Михаил, подскажите, что в моем коде не так. Делаю первые шаги. За основу я взяла Ваш и еще один код. Ваш код я изучила и сделала смену в прямом и обратном порядке. А вот если Ваш код соединить с массивом рисунков, то у меня не работает. <img src="<?php echo $this->getSkinUrl('images/gallery/2.jpg'); ?>" width="489" height="188" id="image_1" style="position: relative; opacity: 0.99; "> <img id="moyslide"> <script> var picsArr=new Array( "<?php echo $this->getSkinUrl('images/gallery/3.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/4.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/6.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/9.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/10.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/11.jpg'); ?>", "<?php echo $this->getSkinUrl('images/gallery/12.jpg'); ?>") var interval = 5000; // задержка между изображениями var time_out = 1; // задержка смены изображений var timeout; var opacity = 100; var i = picsArr.length+1; var hod ='left'; function change_opac() { opacity--; document.getElementById("moyslide").src=picsArr[i]; document.getElementById("moyslide").stile.opacity = opacity/100; timeout = setTimeout("change_opac()",time_out); if (opacity==1) clearTimeout(timeout); } setInterval ( function() { if ( i<0 ) i = picsArr.length; i--; document.getElementById("moyslide").src=picsArr[i]; document.getElementById("moyslide").width="489"; document.getElementById("moyslide").height="188"; document.getElementById("moyslide").style.position="relative"; document.getElementById("moyslide").style.top="-188px"; change_opac(); }, interval ); </script> идет смена основной картинки, но вот исчезновение не работает, т.е. не работает цикл по изменению прозрачности.

Ответить

eugesh eugesh 26.09.2013 15:33:23

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

Ответить

Admin Admin 26.09.2013 18:20:46

Так и должно быть на хроме. Скрипт-то исполнялся всё это время, а после переключения обратно стал все изменения лихорадочно перерисовывать. Единственный способ избавится от этого - поиграть с перехватом события переключения вкладок. Когда вкладка не в фокусе, отключаем исполнение скрипта.

Ответить

eugesh eugesh 26.09.2013 18:26:56

можете в коде это описать) пожалуйста

Ответить

eugesh eugesh 28.09.2013 11:40:26

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

Ответить

Katefan Katefan 30.10.2013 16:07:24

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

Ответить

ARmanKZ9 ARmanKZ9 27.11.2013 21:05:39

спасибо!

Ответить

Regina Regina 16.01.2014 19:57:04

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

Ответить

tikkiwiki tikkiwiki 17.01.2014 17:45:33

Регина, центрируйте все окно,а не только картинки.

Ответить

lika_r lika_r 01.09.2014 20:25:14

Уважаемый Михаил, похоже проблема с миганием картинок интиресует очень многих, если бы вы поделились примером того как можно от этой проблемы избавиться, большое количество посетителей Вашего сайта были бы Вам признательны, и я в том числе :)

Ответить

nadushka.schastlivaya@yandex.ru nadushka.schastlivaya@yandex.ru 20.02.2015 21:45:35

Здравствуйте, Михаил! Подскажите, пожалуйста, я вставила скрипт плавной смены изображений в тег <head> и все работало. А когда положила в отдельный файл .js и подключила его в <head>, уже не работает. Подключала <script type="text/javascript" src="js/script.js"></script> . Путь правильный указала: файл .js лежит в папке js. Спасибо.

Ответить

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