[JavaScript] эффект прокурутки каринок при наведении мышки

[ProFTP]

сабж

как такое сделать, эффект прокурутки каринок при наведении мышки

т.е. есть картинка, например, кликабельная, наводим на ее мышкой и видем все остальные картинки, которые крутутся через 2 сек.... (например, это превиюшки видео клипа) как анимированный gif

никто не видел?

[Хостинг HostFood.ru]

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

[ProFTP]

1) нашел

http://www.zavodskieokna.ru/content/main/okna_160.html
слева

Код: Выделить всё

          <td width="250" valign="top">
		        <div class="face"><img id="ban" alt="" src="/uploads/rotator/face_1.jpg" style="filter: blendTrans(duration=0.5);"></div>
		        <!--div class="o_face" id=DIV1">Мы</div-->
		      </td>
				<script language="JavaScript" type="text/JavaScript">
<!--
					function SetBan (id, gn, gi)
						{
							this.id=id;
							this.gn=gn;
							this.gi=gi;
						}
					var ban_x = 0;
					function chBan ()
						{
							var ban = document.getElementById('ban');
							ban.src="/uploads/rotator/" + eval("ban"+ban_x).gi; 
							
							if (ban_x<7) 
								{
									ban_x = ban_x + 1;
								}
							else
								{
									ban_x=0;
								}
						}
ban0 = new SetBan ('', '', 'face_15.jpg');
ban1 = new SetBan ('', '', 'face_13.jpg');
ban2 = new SetBan ('', '', 'face_14.jpg');
ban3 = new SetBan ('', '', 'face_2.jpg');
ban4 = new SetBan ('', '', 'face_16.jpg');
ban5 = new SetBan ('', '', 'face_12.jpg');
ban6 = new SetBan ('', '', 'face_3.jpg');
ban7 = new SetBan ('', '', 'face_11.jpg');


function getSecs() 
{ 
  chBan ();
  window.setTimeout('getSecs()',5000); 
}
//-->
				</script>

2) _http://js.youporn.com/r/20090813.4/script/thumbchange-r5.js

Код: Выделить всё

YAHOO.namespace("youporn.thumbchange");

YAHOO.youporn.thumbchange = function () {
	var yue = YAHOO.util.Event;
	var yud = YAHOO.util.Dom;
	
	function Changer(el) {
		this.el       = el;
		this.origsrc  = el.src;
		this.running  = false;
		this.runnable = true;
		this.images   = new Array();
		this.num_ss   = this.el.getAttribute('num');
		this.multiple_thumbnail_url = this.el.getAttribute('multiple_thumbnail_url');
		
		if (this.multiple_thumbnail_url) {
			this.prepend_url = this.el.getAttribute('multiple_thumbnail_url');
		}
		else {
			var result = el.src.match(/screenshot\/(\d+)_(large|extra_large)\.jpg$/);
			if (result) {
				this.video_id    = result[1];
				this.size        = result[2];
				this.prepend_url = el.src.substr(0, el.src.search(/screenshot\/(\d+)_(large|extra_large)\.jpg$/));
			} else {
				this.runnable = false;
			}
		}
	}
	
	Changer.prototype.start = function () {
		yud.addClass(this.el, 'highlight-on');
		if (this.runnable) {
			this.running = true;
			this.preload();
			this.animate(1);
		}
	}
	
	Changer.prototype.stop = function () {
		yud.removeClass(this.el, 'highlight-on');
		if (this.runnable) {
			this.el.src = this.origsrc;
			this.running = false;
		}
	}
	
	Changer.prototype.preload = function () {
		for (var i=1; i<=this.num_ss; i++) {
			this.images[i] = new Image();
		}
		
		this.load(1);
		for (var i=2; i<=this.num_ss; i++) {
			setTimeout((function(obj, j) { 
				return function() { obj.load(j); }
			})(this, i), i*100);
		}
	}
	
	Changer.prototype.load = function (num) {
		if (this.running) {
			if (this.multiple_thumbnail_url) {
				this.images[num].src = this.prepend_url + '/' + num + '.jpg?cb=1';
			}
			else {
				this.images[num].src = this.prepend_url + 'screenshot_multiple/' + this.video_id + '/' + this.video_id + '_multiple_' +  num + '_' + this.size + '.jpg';
			}
		}
	}
	
	Changer.prototype.animate = function (num) {
		if (this.running) {
			if (this.images[num].complete) {
				this.el.src = this.images[num].src;
				
				var next = (num == this.num_ss) ? 1 : num + 1;
				setTimeout((function(obj, i) { 
					return function() { obj.animate(i); }
				})(this, next), 625);			
			} else {
				setTimeout((function(obj, i) { 
					return function() { obj.animate(i); }
				})(this, num), 25);			
			}
		}
	}
	
	return {
		register: function (n, prefix) {
			if (!prefix) {
				prefix = 'thumb';
			}
			
			for (var i=1; i<=n; i++) {
				yue.onContentReady(prefix + i, this.hookEvents, this);
			}			
		},

		hookEvents: function () {
			el = this;
			if (el.getAttribute('num') == 0) {
				var tt = new YAHOO.widget.Tooltip("tt_" + el.id, { context:el, text: "No preview available" });
			} else {
				var changer = new Changer(el);
				yue.addListener(el, 'mouseover', changer.start, changer, true);
				yue.addListener(el, 'mouseout', changer.stop, changer, true);
			}			
		}
	};
}();

[ADRE]

можно еще классами jquery типа меньше кода писать )