Слайдшоу "Плавная смена изображений"
Создание слайдшоу в виде плавной смены изображений с помощью JavaScript
С помощью данного скрипта можно создать эффект плавной смены изображений с определённой периодичностью с помощью чистого JavaScript. Большим преимуществом данного скрипта является его кроссбраузерность (работает практически во всех современных браузерах), а также то, что нет необходимости использовать какую-либо JavaScript-библиотеку типа jQuery.
Для создания такого эффекта необходимо написать следующий код:
Пример JavaScript-кода:
<script>
var total_pics_num = 4; // колличество изображений
var interval = 3000; // задержка между изображениями
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>
Пример CSS-кода:
/* Создание класса для изображений с фиксированной позицией и размерами */
<style>
.img-slide {
position: absolute; width:250px; height:200px;
}
</style>
Пример HTML-кода:
<div style="min-height:200px;">
<img src='img01.jpg' id="image_1" class="img-slide" />
<img src='img02.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0);" class="img-slide" alt="" />
<img src='img03.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0);" class="img-slide" alt="" />
<img src='img04.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0);" class="img-slide" alt="" />
</div>
Скопируйте данный javascript-код и css-код и вставьте его в голове веб-страницы между тегами <head> и </head>, а html-код вставьте в нужном месте на веб-странице между тегами <body> и </body>.
Результат работы скрипта
