Слайд-панель на jQuery

В этом посте мы разберем пример реализации простой слайд-панели построенная на использовании библиотек jQuery. Панель будет автоматически менять изображение с установленным интервалом, так же предусмотрена возможность передачи управлению пользователю, т.е. самому менять (назад-вперед) изображения.

Слайд-панель на 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>

Посмотреть

|

Скачать

3 октября 2009 в 13:0712 комментариев Верстка

Комментарии — 12 комментариев

  1. #6708 SilverX в 18:58, 3 октября 2009:

    Ответить | Цитировать

    Круто! Мне понравилось!

  2. #6731 WebMast в 15:38, 4 октября 2009:

    Ответить | Цитировать

    Раньше, для своего сайта, яделал такую карусель при помощ плагина jCarousel. Возни много пришлось делать, так как он был заточен для картинок только.
    А твой пример, кстати, выглядит очень даже красиво : ).

  3. #7175 ^) в 10:51, 16 октября 2009:

    Ответить | Цитировать

    прекрасно……даже есть идея куда воткнуть

  4. #7249 WebMast в 13:04, 17 октября 2009:

    Ответить | Цитировать

    Мне кажется втыкать никуда не нужно. Такую слайдпанель можно использовать, когда она хорошо продумано дизайнером! Это мое мнение..

  5. #7484 Моё имя? Не понятна... в 20:56, 24 октября 2009: (подписался)

    Ответить | Цитировать

    Класно вам всем, общаетесь. А я, например, ничего не понимаю. Спросите что я здесь делаю? А я отвечу… Сама не знаю. А вдруг кто-нибудь ответит… Понимаю, что это не сайт знакомств. Я только хочу все знать. А вдруг среди вас найдется альтруист, который возьмет меня в подмастерья по дизайнерскому делу.

  6. #7500 WebMast в 11:21, 25 октября 2009:

    Ответить | Цитировать

    Напиши мне на почту, познакомимся и может я тебе чем-нибудь помогу..

  7. #8671 Nicola1 в 12:07, 12 декабря 2009:

    Ответить | Цитировать

    Интересно, а можно сделать так, чтобы картинки в слайд – панель выводились не по списку , а автоматически генерировались из какой ни будь папки, например « images», куда загружаются изображения публикаций сайта…?

  8. #8689 WebMast в 16:32, 13 декабря 2009:

    Ответить | Цитировать

    Если честно, то я не знаю, возможо ли генерировать url всех изображений внутри папки. Если можно, то сделать твою слайд панель не трудно : ).

  9. #9903 Sonata в 14:52, 2 августа 2010:

    Ответить | Цитировать

    Спасибо. всё очень просто и понятно.

  10. #10175 Евгений Поляков в 0:11, 27 августа 2010: (подписался)

    Ответить | Цитировать

    А как поменять эффект перехода? А то нужна слайд-панель, но только с расворением, и без управления навигацией, то есть просто закольцованный показ слайдов с эффектом растворения. Возможно? И если да, то можно пожалуйста пример?

  11. Я не пробовал, но вот кусок кода, над которым следует работать:

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

    Код я не тестировал, но теоретически должен работать.

  12. […] добавлю сюда и ссылочку https://bitby.net/web/jquery/slajd-panel-na-jquery/ – пример простого слайд-эффекта, реализуемого […]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting