jQuery плагин - number slideshow - при наведении на порядковый номер слайда, происходит его отображение. Когда курсор вне зоны слайдера, то картинки меняются автоматически. То есть стандартное слайдшоу.

HTML

Для первой демки, без показа описаний изображений:

<div id="number_slideshow" class="number_slideshow">
    <ul>
        <li><a href="#"><img src="img/1.jpg" width="407" height="301" alt="Описание картинки 1"/></a></li>
        <li><a href="#"><img src="img/2.jpg" width="407" height="301" alt="Описание картинки 2"/></a></li>
        <li><a href="#"><img src="img/3.jpg" width="407" height="301" alt="Описание картинки 3"/></a></li>
        <li><a href="#"><img src="img/4.jpg" width="407" height="301" alt="Описание картинки 4"/></a></li>
    </ul>
    <ul class="number_slideshow_nav">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
    <div style="clear: both"></div>
</div>

CSS

.number_slideshow{
    line-height: 20px;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    margin: 0px;
    position: relative;
    display: none;
}
.number_slideshow .number_slideshow_nav{
    filter: alpha(opacity=60);
    opacity: 0.6;
    padding: 0px;
    margin: 0px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.number_slideshow .number_slideshow_nav li{
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -khtml-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    margin-left: 6px;
    position: relative;
    float: left;
}
.number_slideshow .number_slideshow_nav li a{
    padding-left: 8px;
    padding-right: 8px;
}
.number_slideshow ul{
    margin: 0px;
    background-position:center center;
    background-repeat: no-repeat;
}
.number_slideshow ul li{
     border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: absolute;
}
.number_slideshow ul li p{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-left: 5px;
    padding-right: 5px;
    filter: alpha(opacity=60);
    opacity: 0.6;
    font-size: 13px;
    line-height: 23px;
}
.number_slideshow ul li a{
    text-decoration: none;
}
.number_slideshow ul li a img{
    border: none;
}

jаvascript

Подключаем jQuery, плагин и скрипт его инициализации:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/number_slideshow.js"></script>
<script language="javascript" type="text/javascript">
    $(function() {
        $("#number_slideshow").number_slideshow({
            slideshow_autoplay: 'enable',//enable disable
            slideshow_time_interval: '3000',
            slideshow_window_background_color: "#ccc",
            slideshow_window_padding: '1',
            slideshow_window_width: '550',
            slideshow_window_height: '332',
            slideshow_border_size: '1',
            slideshow_border_color: 'black',
            slideshow_show_button: 'enable',//enable disable
            slideshow_show_title: 'disable',//enable disable
            slideshow_button_text_color: '#CCC',
            slideshow_button_background_color: '#333',
            slideshow_button_current_background_color: '#666',
            slideshow_button_border_color: '#000',
            slideshow_loading_gif: 'loading.gif',//картинка загрузки, её можно сменить.
            slideshow_button_border_size: '1'
        });
    });
</script>