Числовое слайдшоу
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>Ссылки
