В этом посте мы разберем пример реализации простой слайд-панели построенная на использовании библиотек jQuery. Панель будет автоматически менять изображение с установленным интервалом, так же предусмотрена возможность передачи управлению пользователю, т.е. самому менять (назад-вперед) изображения.
1. Подключаем библиотеки
Первое, что необходимо сделать, это подключить библиотеки в заголовок (между<head> и </head>) страницы сайта.
<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. Вывод панели
Завершающим шагом, будет вывод панели на страницу сайта. Для этого добавим:
<div id="slider">
<ul>
<li><a href="https://bitby.net/"><img src="images/01.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="https://bitby.net/"><img src="images/02.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="https://bitby.net/"><img src="images/03.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="https://bitby.net/"><img src="images/04.jpg" alt="Слайд-панель на jQuery" /></a></li>
<li><a href="https://bitby.net/"><img src="images/05.jpg" alt="Слайд-панель на jQuery" /></a></li>
</ul>
</div>
Ответить | Цитировать
Ответить | Цитировать
А твой пример, кстати, выглядит очень даже красиво : ).
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
speed
);
};
Находится в самом скрипте.
Сделать можно одним способом:
Сделать исчезновение всего списка (ul), переместить этот список и опять плавно показать.
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj)
.animate({opacity: 'hide' }, 400)
.css({marginLeft: p })
.animate({opacity: 'show' }, 400);
} else {
p = (t*h*-1);
$("ul",obj)
.animate({opacity: 'hide' }, 400)
.css({marginTop: p })
.animate({opacity: 'show' }, 400);
);
};
Код я не тестировал, но теоретически должен работать.
Ответить | Цитировать