stas-cap

Нашел вот такой слайдер. Помогите прикрутить к главной странице!

В этой статье мы поговорим о простом слайдэре изображений. Слайдер будет автоматически менять картинки. Время смены картинок вы можете установить сами, так же имеется 2 рычажка по бокам, при помощи которых вы сможете сами листать изображения вперед и назад.

Приступим к установке.

1. Подключаем все скрипты

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>

2. Украсим css стилями

#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(images/btn_next.gif) no-repeat 0 0;
}

3. HTML код ( блок с изображениями)

<div id="slider">
<ul>
<li><a href="http://bitby.net/"><img src="images/01.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="http://bitby.net/"><img src="images/02.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="http://bitby.net/"><img src="images/03.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="http://bitby.net/"><img src="images/04.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="http://bitby.net/"><img src="images/05.jpg" alt="Слайд-панель на jQuery" /></a></li>
</ul>
</div>

Еще есть три файла: screen.css, easySlider1.5.js, jquery.js

Скачать: bitby_net____slide-panel.zip [121,38 Kb] (cкачиваний: 396)