Товарищи! Прошу прощения что не по теме, но тут полюбому есть спецы, которым не составит труда помочь...
Есть красивый слайдер на JS, вот
Код |
---|
var total_pics_num = 3; // колличество изображений
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
);
<img src="XXX" width="500" height="313" id="image_1" style="position: relative; opacity: 0.99; ">
<img src="XXX" width="500" height="313" id="image_2" style="position: relative; top: -315px; opacity: 0.01; ">
<img src="XXX" width="500" height="313" id="image_3" style="position: relative; top: -635px; opacity: 0.01; ">
|
Но у него проблемка. Если окно со слайдером не в фокусе (например свернуто или переключились на другое), затем мы через какоето время вернулись к нему, то картинки начинают судорожно мигать. Какбы слайдер показывает нам все что было за время нашего отсутствия.
Я вижу один выход - останавливать таймер когда окно не в фокусе. А как это сделать я незнаю... помогите советом...