Плавная смена изображения в JavaScript
Описание: Сегодня будет очень интересный скрипт, позволяющий плавно сменять изображения. Огромным преимуществом данного скрипта плавной смены изображений на JavaScript - это кроссбраузерность (работает даже в IE6). Также не требуется библиотека JQuery, что редкость для подобных скриптов. Надеюсь, что он Вам придётся по вкусу. А все исходники скрипта далее в статье.
Результат:
Код 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> -
Создано 28.06.2011 18:41:30
-
Михаил Русаков
Комментарии (60):
Есть предложение, чтобы не возникало ошибок в стилях: 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; }
Ответить
Ну и конечно, для img тоже: <style> .image{opacity: 0;} </style> <!--[if IE]> <style> .image{filter: alpha(opacity=0);} </style> <![endif]-->
Ответить
В <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>
Ответить
Спасибо, но в данном случае это будет излишним, так как скрипт работает даже в IE6, а в более поздних версиях и подавно.
Ответить
Да просто консоль в firefox ругается. Предупреждение: Ошибка при анализе значения «filter». Потерянное объявление.
Ответить
Давно искал скрипт фотогаллереи =) Спасибо. Кстати, он скоее всего и на КПК работать будет (На WORD PRESS я поставил галлерею, а потом я был удивлён, что и на мобиле работает слаидшоу! =))
Ответить
Михаил,я нашла на вашем сайте скрипт про галерею. Скажите а можно сделать так, что б при нажатии на маленькое фото появлялось большое в виде слайда с 2-3х фото - тоесть тоже самое фото в других ракурсах.И так каждая фотка в галерее.
Ответить
Да, можно. Поскольку в двух словах трудно объяснить, я напишу подобный скрипт к понедельнику и выложу его. Спасибо за идею для статьи!
Ответить
!!!эх, если б могла разцеловала б!(может для этого тоже скрипт есть :) Спасибо вам большое!!!! Даже не представляете, как мне ваши уроки помогли!!! Столько информации в пустую перерыла, пока ваш сайт не нашла!!!
Ответить
Очень простенько , что и радует. Только на ucoz изображения смещаются в сторону при перелистывании. Как можно отцентровать их ?
Ответить
Они не должны смещаться. Проблемы уже в коде на Вашем сайте. И этих проблем может быть тысячи самых разнообразных.
Ответить
Настроил всё ок . Спасибо ! Не очень разбираюсь в скриптах ,хотелось бы ссылки прикрепить .
Ответить
Можно ли сделать чтобы данные картинки были фоном(тобишь что бы поверх их был текст)
Ответить
Да, можно. Делается это всё через CSS.
Ответить
а можно как нибудь поподробнее)
Ответить
Можно, например, поднять контент ниже лежащий через margin-top выше, так чтобы он оказался поверх картинки. Но лучше будет изменить скрипт, заменив тег img на div с заданным width и height, полностью совпадающими с размерами картинки. Далее менять свойство background у div аналогично тому, как сейчас происходит с атрибутом src. А уже само содержимое (текст) пишите внутри этого div. Если не понимаете, то изучайте CSS.
Ответить
Огромное спасибо! Отчасти усвоил, перевариваю остальное) Идея вашего сайта супер, сделано все ну очень хорошо, вы мне очень помогли.
Ответить
На iPhone скрипт первый раз прокручивает картинки нормально, после этого зависает последняя картинка и начинает накладываться на все остальные которые меняются с бешеной скоростью В андроиде все нормально видится - почему так?
Ответить
Я не работаю с iphone, поэтому не могу сказать почему так.
Ответить
Михаил, спасибо, за скрипт, у меня один вопрос а как мне данный "эффект плавной смены картинок" вставить в определённую ячейку, у меня простенький сайт на html(сам делаю)вписан в таблицы с ячейками. вверху ячейка-баннер, левая ячейка статичное фото, правая ячейка меняющиеся. И вот мне в эту ячейку надо вставить между тегами <td>...<td> файл со скриптом сделал внешним. насколько понял, надо всё то, что между тегов <div>...<div> у вас присвоить один id- <img id="pict" и его вставить между тегов <td>...<td>. Извините за ламерский вопрос)
Ответить
Не надо ничего присваивать, просто скопируйте весь код внутри <div> внутрь ячейки <td>.
Ответить
копировал, изображение меняется, но находится вне ячейки, вообще за пределами таблицы
Ответить
Значит забыли какой-нибудь tr, td, table где-то закрыть или ещё что-то, проблема в вёрстке. Попробуйте для начала вставить любое одно изображение в свою ячейку.
Ответить
100 раз всё перепроверил по ячейкам, вот код (страница html и картинки файл js отдельным файлом) http://narod.ru/disk/39982686001/medvedev-studio.ru.rar.html Если не затруднит посмотрите, а то у же мозг "сломал", весь интернет облазал, но ответа не нашёл...Буду благодарен
Ответить
Не знаю, как Вы смотрели, но я эту ошибку за 5 секунд обнаружил. Как вот это можно было пропустить? <img src='images/head_6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0);position: absolute;" /> </td> <tr>
Ответить
да извиняюсь, этой <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>
Ответить
Почему-то спустя некоторое время картинки начинают судорожно моргать. Обновляешь, все нормально. В чем может быть дело?
Ответить
В браузере. Исправить весьма затруднительно. Попробуйте запускать таймер, только когда на окне стоит фокус. Если JavaScript плохо знаете, то лучше поищите готовый аналогичный скрипт на JQuery, они чуть ли не сотни раз больше, но зато там нет морганий.
Ответить
Михаил, не подскажете, можно сделать так, чтобы на одной странице работали 2 блока картинок одновременно?
Ответить
Можно, но у них должны быть разные id.
Ответить
ID поставил разные: в 1-м блоке с id="image_1" до id="image_4", во втором с id="image_5" по id="image_8", но во втором блоке картинки так и не меняются.
Ответить
Скрипт тоже правьте, посмотрите код, изучите его, вникните в его работу и исправьте. Без знаний JavaScript здесь не обойтись, сразу говорю.
Ответить
Спасибо Вам за скрипты ! Они мне очень помогают. Но я читал ваш ответь на как разместит верхнюю картинку на таблицу , и сделал так как Вы ответили но не получается. Может подскажите как разместить изображения по центру чтобы при увеличение масштаб браузера изображения остался по центру! За ранее спасибо! Я применяю скрипты для баннера
Ответить
Используйте выравнивание по центру для нужного элемента.
Ответить
Доброе... Я заметил одну закономерность. Когда оставляешь страницу с данным скриптом и переходишь на другу закладку, после возвращение на нашу страницу со скриптом изображения начинают быстро перелистываться. Искал в JavaScript-е причину, но не нашел. Решил обратиться к вам за помощью. Браузер Mozilla
Ответить
Так и должно быть. Скрипт работает, пока открыта другая вкладка, а потом быстро пролистывает до нужного слайда, когда открывается страница со слайдами.
Ответить
Жаль. Ну ладно. Так тоже круто! Главное, что он весит мало. Спасибо.
Ответить
Михаил, а можно сделать чтобы при нажатии на картинку был переход на страницу , я попробовала вставить A href , но когда был один переход получилось, а если все картинки , то не работает . Подскажите что не так?
Ответить
Можете сделать перенаправление по ссылки при событии onClick, тоже через javascript.
Ответить
МИХАИЛ! КАК ВСЕ ЭТО ВЫРОВНЯТЬ ПО ЦЕНТРУ ЭКРАНА???????????????????? Подскажите пожалуйста!!!
Ответить
<div style="text-align: center;">
Ответить
Вы меня извените, Михаил.., но я абсолютно "чайник", куда я только не приставлял "ваш ответ"- ничего не получается! То картинки как обычно в левом углу, то меняются по разным углам.., непойму ничего :( Если Вам не составит большого труда, пожалуйста, напишите- куда именно это нужно вставить??? Заранее извеняюсь за неудобства, спасибо!
Ответить
Там выбора-то нет. Это нужно заменить <div> на <div style="text-align: center;">.
Ответить
Скажите пожалуйста, как вывести этот скрипт в хедере, что поменять в файле header.php? Обычная свтавка скрипта выводит смену картинок на страницы сайта, а шапка вообще пропадает. Спасибо.
Ответить
Значения не имеет, где выводить. Другое дело, что если HTML не знаете или знаете очень плохо, то не получится. Изучайте базу, а уже потом учитесь устанавливать скрипты.
Ответить
HTML знаю, просто допереть не могу, что именно нужно, уже много всего перепробовано...
Ответить
Мне потребовалось сделать две таки плавающие части картинок,но работает только одна,возможно ли как-то это исправить?
Ответить
Надо использовать разные id для разных блоков, плюс отдельные функции для каждого блока. Без знаний по JavaScript не сможете это сделать, поскольку переписывать прилично придётся.
Ответить
<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> Вот такое решение,вставляется в боди,и можно делать две подряд.
Ответить
Михаил, подскажите, что в моем коде не так. Делаю первые шаги. За основу я взяла Ваш и еще один код. Ваш код я изучила и сделала смену в прямом и обратном порядке. А вот если Ваш код соединить с массивом рисунков, то у меня не работает. <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> идет смена основной картинки, но вот исчезновение не работает, т.е. не работает цикл по изменению прозрачности.
Ответить
Здравствуйте, скрипт шикарный, но есть одно но, пожалуйсто подскажите как исправить. Проблема такова, в Браузере Хром когда ты открываешь сайт где эти сменяющиеся картинки все норм, но если перейти на другую вкладку и побыть там некоторое время, то при возврощении обратно на вкладку с картинками они начинают "Быстро перелистываться", и чем дольше не быть на вкладке тем дольше картинки будут "сходить с ума", такое ощущение что браузер пытается показать в мин. сроки все то что я пропустил в момент отсутствия на вкладке, пожалуйсто помогите исправить этот глюк. Заранее Благодарен.
Ответить
Так и должно быть на хроме. Скрипт-то исполнялся всё это время, а после переключения обратно стал все изменения лихорадочно перерисовывать. Единственный способ избавится от этого - поиграть с перехватом события переключения вкладок. Когда вкладка не в фокусе, отключаем исполнение скрипта.
Ответить
можете в коде это описать) пожалуйста
Ответить
помогите плз, уже несколько дней ищу как это сделать не получается, т.к java script почти не знаю, а пока буду учить уже не будет надобности в скрипте, пожалуйста помогите
Ответить
Подскажите пожалуйста, как добавить ссылку на изображение и как поиграть с переключением вкладок, чтоб при переходе они не мелькали. Заранее спасибо.
Ответить
спасибо!
Ответить
Михаил, спасибо за замечательный сайт! У меня возник вопрос- при центрировании слайд-шоу в центре находится верхний левый угол изображения (-ий), а не центр. Подскажите пожалуйста, почему так может быть? Заранее спасибо.
Ответить
Регина, центрируйте все окно,а не только картинки.
Ответить
Уважаемый Михаил, похоже проблема с миганием картинок интиресует очень многих, если бы вы поделились примером того как можно от этой проблемы избавиться, большое количество посетителей Вашего сайта были бы Вам признательны, и я в том числе :)
Ответить
Здравствуйте, Михаил! Подскажите, пожалуйста, я вставила скрипт плавной смены изображений в тег <head> и все работало. А когда положила в отдельный файл .js и подключила его в <head>, уже не работает. Подключала <script type="text/javascript" src="js/script.js"></script> . Путь правильный указала: файл .js лежит в папке js. Спасибо.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.