А вот этот пример дерганный? Оригинал вот
http://javascript.ru/blog/mycoding/Galereya но в нём прокрутка по 2 пикселя,
а вот в этом примере по 10 пикселей.
<html>
<head>
<title>Галлерея</title>
<style>
div.gallery{
width:300;
height:100;
border:2px dashed #888888;
overflow:hidden;
}
#tooltip{
display:none;
background:url("/forum/images/tooltip.png") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
font-size:12px;
height:66px;
width:180px;
padding:10px 10px 40px;
font:14px/24px Calibri,"Trebuchet MS",Tahoma,sans-serif;
}
.roundCornerAll{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius: 4px;
}
ul.gallery{
margin:0;
padding:0;
position:relative;
}
ul.gallery li{
display:inline;
}
ul.gallery img{
border:medium none;
}
</style>
<script>
function _$(id)
{
this.id=id;
return document.getElementById(id);
}
function domNTags(id,tag)
{
var elem=_$(id);
var list=elem.childNodes;
var n=0;
tag=tag.toUpperCase();
for(var i=0;i<list.length;i++){
if(list[i].tagName==tag){n++}
}
return n;
}
_$.timer = function(secToRepeat,timerId,func)
{
window[timerId] = setInterval(func,secToRepeat);
}
_$.timerStop = function(timerId)
{
if(window[timerId]) {clearInterval(window[timerId]);delete window[timerId];}
}
_$.waitAndRun = function(sec,func)
{
setTimeout(func, sec*1000);
}
function int(value)
{
return parseInt(value);
}
function abs(value)
{
return Math.abs(value);
}
function move(value,secToRepeat)
{
if(!window['timerGallery'])
{
var imgPrev=_$('galleryPrev');
var imgNext=_$('galleryNext');
_$('ulGallery').style.opacity="0.5";
_$.timer(secToRepeat,'timerGallery',function()
{
if(!window.galleryTimesToRepeat) {galleryTimesToRepeat=int(92/abs(value));}
else{galleryTimesToRepeat--;}
if(galleryTimesToRepeat<1){delete window.galleryTimesToRepeat;stop();}
var elem=_$('ulGallery');
var left=int(elem.style.left);
if(left>=10) {imgPrev.style.opacity='0.5';imgNext.style.opacity='1';}
else if(left<=-450) {imgNext.style.opacity='0.5';imgPrev.style.opacity='1';}
else {imgPrev.style.opacity='1';imgNext.style.opacity='1';}
if(left<10 && value>0){elem.style.left=left+value;}
else if(left>-450 && value<0){elem.style.left=left+value;}
else {delete window.galleryTimesToRepeat;stop();};
});
}
}
function stop()
{
_$('ulGallery').style.opacity="1";
_$.timerStop('timerGallery');
}
function mouseover(e,number)
{
var e=e || event;
var elem=_$('tooltip');
var secToRepeat=1;
var value=3;
var tolX=int(elem.style.left);
var tolY=int(elem.style.top);
if(window['timerTooltip']==undefined && abs(window.x-tolX)>value)
{
_$.timer(secToRepeat,'timerTooltip',function()
{
var elem=_$('tooltip');
elem.innerHTML="Среботал элемент номер "+number;
var tolX=int(elem.style.left);
var tolY=int(elem.style.top);
if(abs(window.x-tolX)<value+3) {value=1;}
if(window.x<tolX){_$('tooltip').style.left=tolX-value;}
if(window.x>tolX){_$('tooltip').style.left=tolX+value;}
//if(y<tolY){_$('tooltip').style.top=--tolY;}
//if(y>tolY){_$('tooltip').style.top=++tolY;}
//if(x==tolX && y==tolY) {_$.timerStop('timerTooltip');}
_$('test').innerHTML=abs(x-tolX)+" "+value;
if(abs(window.x-tolX)<value) {_$.timerStop('timerTooltip');}
});
}
}
function mouseout()
{
}
window.onload = function()
{
_$('gallery').onmousemove = function(e)
{
e=e||event;
window.x=e.clientX;
window.y=e.clientY;
var elem=_$('gallery');
var elemX=int(elem.style.left);
var elemY=int(elem.style.top);
if(window.x<60 || window.x>360 || window.y<200 || window.y>300) {_$('tooltip').style.display="none";}
//alert(window.x+" "+window.y);
if(window.x>=60 && window.x<=360 && window.y>=200 && window.y<=300) {_$('tooltip').style.display="block";}
}
}
</script>
</head>
<table id="gallery" style="position:absolute;left:20;top:200;">
<tr>
<td><img id="galleryPrev" onmousedown="if(this.style.opacity!=0.5) {move(10,1);}" ondragstart="return false;" src="/forum/images/go-previous.png" style="opacity:0.5;" /></td>
<td>
<div class="gallery roundCornerAll" >
<ul class="gallery" id="ulGallery" style="width: 810px; left: 10px; top:10;">
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img1.jpg" onmouseover="mouseover(event,1);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img2.jpg" onmouseover="mouseover(event,2);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img3.jpg" onmouseover="mouseover(event,3);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img4.jpg" onmouseover="mouseover(event,4);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img5.jpg" onmouseover="mouseover(event,5);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img6.jpg" onmouseover="mouseover(event,6);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img7.jpg" onmouseover="mouseover(event,7);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="/forum/tmp/img8.jpg" onmouseover="mouseover(event,8);"></a></li>
</ul>
</div>
</td>
<td><img id="galleryNext" onmousedown="if(this.style.opacity!=0.5) {move(-10,1);}" ondragstart="return false;" src="/forum/images/go-next.png" /></td>
</tr>
</table>
<div id='tooltip' style="position:absolute;top:93;left:200;">Tooltip</div>
<div id="test"></div>
</html>
