для начала демка
теперь внутренности:
подключение:
<div class="slider"> <– на него вешаем плагинчег –>
<div><img src="img1.jpg" alt="" /></div> <– в диве может быть все, что угодно –>
<div><img src="img2.jpg" alt="" /></div>
<div><img src="img3.jpg" alt="" /></div>
<div><img src="img4.jpg" alt="" /></div>
<div><img src="img5.jpg" alt="" /></div>
</div>
<script type="text/javascript">
$('.slider').jSlider(); // на блок вешаем плагин
</script>стили:
.jSlider * { margin:0; padding:0; } /* это и строкой ниже скорее уже у всех есть, но на всякий)) */
.jSlider ul { list-style:none; }
.jSlider { position:relative; border:10px solid #000; } /* обертка, с рамочкой */
.jSlider .jSlider_block { position:absolute; }
.jSlider .jSlider_block div { float:left; } /* наши блоки, лучше не вешать лишние отступы (маргин, паддинг, бордер) */
.jSlider .jSlider_navigate { width:100%; height:100%; position:absolute; top:0; left:0; } /* вся навигация */
.jSlider .jSlider_navigate .jSlider_buttons { width:100%; height:100%; position:relative; } /* блок с кнопочками */
.jSlider .jSlider_navigate .jSlider_prev, .jSlider .jSlider_navigate .jSlider_next, .jSlider .jSlider_navigate .jSlider_play { width:44px; height:44px; background:url('buttons.png') 0 0 no-repeat; cursor:pointer; position:absolute; } /*все кнопочки */
.jSlider .jSlider_navigate .jSlider_prev { background-position:0 0; top:45%; left:0; } /* левая */
.jSlider .jSlider_navigate .jSlider_next { background-position:0 -44px; top:45%; right:0; } /* правая */
.jSlider .jSlider_navigate .jSlider_play { background-position:0 -88px; bottom:0; right:0; } /* плей */
.jSlider .jSlider_navigate .jSlider_play.jSlider_onplay { background-position:0 -132px; } /* пауза */
.jSlider .jSlider_navigate .jSlider_pages { overflow:hidden; padding-right:20px; background:url('buttons.png') 100% -176px no-repeat; position:absolute; bottom:0; left:0; } /* блок пагинатора */
.jSlider .jSlider_navigate ul { height:20px; background:url('buttons.png') 0 -196px repeat-x; overflow:hidden; -moz-user-select:none; user-select:none; } /* непосредственно сам пагинатор */
.jSlider .jSlider_navigate ul li { float:left; font:normal 12px Arial; color:#fff; padding:3px 6px 2px; margin:0; cursor:pointer; }
.jSlider .jSlider_navigate ul li.jSlider_active { background:#fff; color:#000; }дефолтные настройки:
$('.slider').jSlider({
duration: 300, // скорость анимации
playDelay: 3000, // пауза между анимацией (при плее)
easing : 'easeInQuart', // стиль анимации
navigate: 'both', // навигация: 'buttons'|'pager'|'both'|'none'
prevBtnText: '', // текст кнопки "назад": 'your_text'|''
nextBtnText: '', // "вперед"
playBtnText: '', // "плей"
stopBtnText: '', // "пауза"
pagerPosition: 'left', // расположение пагинатора по горизонтали: 'left'|'center'|'right'
pagerNums: true, // имеет ли пагинатор циферки: true|falser
autoPlay: false, // автоПлей
autoStop: true, // автоСтоп
hideNav: false // скрывать навигацию (открывается при наведении)
});
