Показать сообщение отдельно
  #13 (permalink)  
Старый 15.03.2017, 16:54
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Более аккуратный вариант
<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>
Ответить с цитированием