<style>
.ghost_thumb {
height :120px;
}
.ghost_thumb img {
position :absolute;
}
</style>
<script>
var Ghosting = function(ghosts) {
var Thumbs = [];
function Slider() {
Thumbs.forEach(function(thumb) {
var gap = thumb.pause + thumb.fading;
thumb.phase = (thumb.phase + 1) % (gap * thumb.slides.length);
var phase = thumb.phase % gap;
var index = (thumb.phase - phase) / gap;
var next = (index + 1) % thumb.slides.length;
if(phase >= thumb.pause)
thumb.slides[index].style.opacity = 1.0 - (phase - thumb.pause) / thumb.fading,
thumb.slides[next].style.opacity = 0.0 + (phase - thumb.pause) / thumb.fading;
});
setTimeout(Slider.bind(this), 10);
}
ghosts.forEach(function(thumb) {
var props = thumb.split(/\s+/);
var el = document.getElementById(props[0]);
if(el) {
var imgs = el.getElementsByTagName("img");
if(imgs.length) {
Thumbs.push({
frame : el,
slides : imgs,
fading : props[1],
pause : props[2],
phase : 0
});
for(var i = 0; i < imgs.length; ++ i)
imgs[i].style.opacity = 0;
}
}
Slider();
});
}
</script>
<body onload='Ghosting(["Gallery_two 25 3","Gallery_three 15 9"])'>
<p>Плавность - 25, Пауза - 3</p>
<div id=Gallery_two class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
</div>
<p>Плавность - 15, Пауза - 9</p>
<div id=Gallery_three class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
<img src='http://javascript.ru/forum/image.php?u=3602&dateline=1489262044' />
</div>
</body>