Описание: Сегодня будет очень интересный скрипт, позволяющий плавно сменять изображения. Огромным преимуществом данного скрипта плавной смены изображений на 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> Android 8.1.0, Chrome,70.0.3538.110
