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;
}

javascript

Подключаем 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>

СКАЧАТЬСкачек: 1176
223,09 Kb
Кто скачал?

ДЕМОПосмотреть
пример