Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Слайдер с плавной сменой изображений
Информация к новости
  • Просмотров: 389
  • Автор: hazardcd
  • Дата: 28-02-2016, 16:51
  • Не нравится
  • 0
  • Нравится
28-02-2016, 16:51

Слайдер с плавной сменой изображений

Категория: Вебмастер / Скрипты, Коды / Картинки, Баннеры

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

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

 

Следующий javascript код поместите в начале Вашей странички:

<script type="text/javascript">
var image_count 3;
var interval 3000;
var time_out 10;
var 0;
var timeout;
var opacity 100;
 
function change_image() {
 opacity--;
 var 1;
 var current_image 'img_' i;
 if (== image_count1;
 var next_image 'img_' j;
 document.getElementById(current_image).style.opacity=opacity/100;
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
 document.getElementById(next_image).style.opacity=(100-opacity)/100;
 document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
 timeout setTimeout("change_image()"time_out);
 if (opacity==1) {
  opacity 100;
  clearTimeout(timeout);
 }
}
 
setInterval (function() {i++; if (i>image_counti=1change_image();}, interval);
</script>

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

<img src='image/img_11.png' id="img_1" style="position: absolute;">
<img src='image/img_12.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">
<img src='image/img_13.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">

Если код немного доработать, то все или нужные картинки станут кликабельными:

<a href= "http://my_site"><img src='image/img_11.png' id="img_1" style="position: absolute;"></a>
<a href= "http://my_site"><img src='image/img_12.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;"></a>
<img src='image/img_13.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">

Если требуется зафиксировать слайдер в определенной позиции, то код изменится так:

<div style="padding:10px 0 0 80px;position:absolute;">
<a href= "http://my_site"><img src='image/img_11.png' id="img_1" style="position: absolute;"></a>
<a href= "http://my_site"><img src='image/img_12.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;"></a>
<img src='image/img_13.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">
</div>

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

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

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *