Рейтинг: 5/5
Звичним елементом дизайну веб-сторінок стала плавна зміна зображень. Для її реалізації існує кілька підходів. Можна використовувати gif-анімацію. При цьому, щоб забезпечити достатню плавність, необхідно використовувати багато кадрів.
Ще одна фішка скрипта в тому, що крім плавної зміни зображень кожна картинка може бути посиланням на свій ресурс. Скільки картинок - стільки посилань на різні ресурси. Можете перевірити! Цікава альтернатива банерах?
На зображенні видно, як працює скрипт. Кількість змінюваних зображень, час показу кожного кадру і час переходу легко змінити.
Плавне зміна зображень реалізується у функції ChangeImage (). У рядку 93 створюється таймер з ідентифікатором play_id. викликає цю функцію c інтервалом time_show. Значення start = 0 відповідає активності таймера. При втраті вікном браузера фокуса (перейшли на іншу вкладку, взагалі на інший додаток) таймер play_id зупиняється рядком 78. Значення start = 1 відповідає "сну" таймера. При поверненні фокуса на вікно браузера таймер запускається рядком 86.
Найперший раз таймер play_id запускається рядком 93 а не 86 тому, що в браузерах Google Chrome. Opera і Safari відразу після завантаження сторінки обробник window.onfocus не викликається і зміна зображень не відбувається.
- після втрати і повернення фокусу (ви перейшли на іншу вкладку браузера, в інший додаток а потім повернулися на дану сторінку) зображення спочатку будуть змінюватися швидко "наскакуючи" один на одного
- для розміщення на одній сторінці кількох блоків плавно змінюють одне зображень і, якщо Ви не програміст, виникають складності
Від цих недоліків вільний спосіб з використанням CSS - статті Плавне зміна зображень CSS3 частина 1 і Плавне зміна зображень CSS3 частина 2. Там же розглядається ще один з ефектів плавної зміни зображень - зміна обертанням.