Горизонтальная или вертикальная прокрутка миниатюр изображений. Использует jQuery и опционально easing плагин для эффектов.

HTML

Рассмотрим на примере первой Демки.

<div id="outer_container">
<div id="thumbScroller">
    <div class="container">
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb1.jpg" title="Дорога" alt="Дорога" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb2.jpg" title="Цветок" alt="Цветок" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb3.jpg" title="Сумерки" alt="Сумерки" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb4.jpg" title="Водопад" alt="Водопад" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb5.jpg" title="Каньон" alt="Каньон" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb6.jpg" title="Дорога" alt="Дорога" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb7.jpg" title="Лес" alt="Лес" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb8.jpg" title="Дом" alt="Дом" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb9.jpg" title="Рай" alt="Рай" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb10.jpg" title="Деревья" alt="Деревья" class="thumb" /></a></div>
        </div>
        <div class="content">
            <div><a href="#"><img src="thumbs/thumb11.jpg" title="Листья" alt="Листья" class="thumb" /></a></div>
        </div>
    </div>
</div>
</div>

CSS

Только для Демо 1:

#outer_container{margin:60px auto; width:600px; padding:0 10px; background:#000; border:1px solid #999;}
#thumbScroller{position:relative; margin:auto;}
#thumbScroller{width:600px;}
#thumbScroller, #thumbScroller .container, #thumbScroller .content{height:170px;}
#thumbScroller{overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{width:260px; float:left;}
#thumbScroller .content div{padding:10px 15px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}

jаvascript

Подключаем в шапке jQuery, в некоторых демках, дополнительно подключается плагин easing:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

В теле страницы, перед закрывающим тегом body вставляем скрипт, который будет взависимости от положения курсора обеспечивать прокрутку изображений:

$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
 
var sliderWidth=$thumbScroller.width();
var itemWidth=$thumbScroller_content.width();
 
$thumbScroller_content.each(function (i) {
    totalContent=i*itemWidth;   
    $thumbScroller_container.css("width",totalContent+itemWidth);
});
 
$thumbScroller.mousemove(function(e){
    var mouseCoords=(e.pageX - this.offsetLeft);
      var mousePercentY=mouseCoords/sliderWidth;
      var destY=-(((totalContent-(sliderWidth-itemWidth))-sliderWidth)*(mousePercentY));
      var thePosA=mouseCoords-destY;
      var thePosB=destY-mouseCoords;
      if(mouseCoords==destY){
        $thumbScroller_container.stop();
      }
      if(mouseCoords>destY){
        $thumbScroller_container.css("left",-thePosA);
      }
      if(mouseCoords<destY){
        $thumbScroller_container.css("left",thePosB);
      }
});
 
var fadeSpeed=300;
 
$thumbScroller_thumb.each(function () {
    var $this=$(this);
    $this.fadeTo(fadeSpeed, 0.5);
});
 
$thumbScroller_thumb.hover(
    function(){ //mouse over
        var $this=$(this);
        $this.stop().fadeTo(fadeSpeed, 1);
    },
    function(){ //mouse out
        var $this=$(this);
        $this.stop().fadeTo(fadeSpeed, 0.5);
    }
);

Для вертикального варианта прокрутки, скрипт будет несколько другим.