Lof JSliderNews 2.0 - плагин слайдшоу
Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.
HTML
Приведен пример из Демо 1
<div id="jslidernews1" class="lof-slidecontent" style="width:980px; height:340px;">
<div class="preload"><div></div></div>
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:980px; height:340px;">
<ul class="sliders-wrap-inner">
<li>
<img src="images/thumbl_980x340.png" title="Новость 1">
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 1" href="#Category-1">/ Новость 1 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 1</h4>
<p>Один из лучших телефонов современности, хотите узнать больше...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_002.png" title="Новость 2" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 2" href="#Category-2">/ Новость 2 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 2</h4>
<p>Отличнейший телефон с кучей нужных и не нужных функций...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_003.png" title="Новость 3">
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 3" href="#Category-3">/ Новость 3 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 3</h4>
<p>Просто возьмите мобильный в руки и вы не захотите его отдавать...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_004.png" title="Новость 4" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 4" href="#Category-4">/ Новость 4 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 4</h4>
<p>Отличный девайс для интересного времяпрепровождения вне дома...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_005.png" title="Новость 5" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 5" href="#">/ Новость 5 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 5</h4>
<p>Видели рекламу этого ноутбука по ТВ? Тогда обязательно посмотрите...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_006.png" title="Новость 6" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 6" href="#">/ Новость 6 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 6</h4>
<p>"Моя прелесть!" Иначе и не скажешь. Копите деньги друзья...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_007.png" title="Новость 7" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 7" href="#">/ Новость 7 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 7</h4>
<p>Отличный ноутбук, но можно найти такой же и без перламутровых пуговиц...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_008.png" title="Новость 8" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Новость 8" href="#">/ Новость 8 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div>
<h4>Новость 8</h4>
<p>Ах планшет, планшет. А нужен ли ты вообще ?...
<a class="readmore" href="#">Подробнее</a>
</p>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<div class="button-next">Вперед</div>
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li><img src="images/thumbs/thumbl_980x340.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_004.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_006.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_007.png" /></li>
<li><img src="images/thumbs/thumbl_980x340_008.png" /></li>
</ul>
</div>
<div class="button-previous">Назад</div>
</div>
<!----------------- END OF NAVIGATOR --------------------->
<!-- BUTTON PLAY-STOP -->
<div class="button-control"><span></span></div>
<!-- END OF BUTTON PLAY-STOP -->
</div> CSS
Опять же стили из Демо 1, в качестве примера:
/* slider layout */
.lof-slidecontent {
position: relative;
overflow: hidden;
border: #F4F4F4 solid 1px;
}
.lof-slidecontent .preload {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100000;
text-align: center;
background: #FFF
}
.lof-slidecontent .preload div {
height: 100%;
width: 100%;
background: transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-slidecontent .sliders-wrapper {
position: relative;
height: 100%;
width: 900px;
z-index: 3px;
overflow: hidden;
}
.lof-slidecontent ul.sliders-wrap-inner {
overflow: hidden;
background: transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
padding: 0px;
margin: 0;
position: absolute;
overflow: hidden;
}
.lof-slidecontent ul.sliders-wrap-inner li {
overflow: hidden;
padding: 0px;
margin: 0px;
float: left;
position: relative;
}
.lof-slidecontent .lof-opacity li {
position: absolute;
top: 0;
left: 0;
float: inherit;
}
.lof-slidecontent .navigator-content {
position: absolute;
bottom: 10px;
right: 10px;
background: url(../images/transparent_bg.png) repeat;
padding: 5px 0px;
}
.lof-slidecontent .navigator-wrapper {
position: relative;
z-index: 10;
height: 180px;
width: 310px;
overflow: hidden;
color: #FFF;
float: left
}
.lof-slidecontent ul.navigator-wrap-inner {
top: 0;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
}
.lof-slidecontent ul.navigator-wrap-inner li {
cursor: hand;
cursor: pointer;
list-style: none;
padding: 0;
margin-left: 0px;
overflow: hidden;
float: left;
display: block;
text-align: center;
}
/*******************************************************/
ul.sliders-wrap-inner li img {
padding: 0px;
}
.lof-slidecontent .slider-description a.readmore {
color: #58B1EA;
font-size: 95%;
}
.lof-slidecontent .slider-description a {
color: #FFF;
}
.lof-slidecontent .slider-description {
z-index: 100px;
position: absolute;
bottom: 50px;
left: 0px;
width: 350px;
background: url(../images/bg_trans.png);
height: 100px;
padding: 10px;
color: #FFF;
}
.lof-slidecontent .slider-description h4 {
font-size: 14px;
margin: 10px 0;
padding: 0;
}
.lof-slidecontent .slider-description .slider-meta a {
margin: 0;
background: #C01F25;
font-size: 75%;
padding: 2px 3px;
font-family: "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none
}
.lof-slidecontent .item-meta a:hover {
text-decoration: underline;
}
.lof-slidecontent .item-meta i {
font-size: 70%;
}
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li img {
border: #666 solid 3px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img, .lof-slidecontent ul.navigator-wrap-inner li:hover img {
border: #A8A8A8 solid 3px;
-moz-transition: border-color ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next, .lof-slidecontent .navigator-content .button-previous {
display: block;
width: 22px;
height: 30px;
color: #FFF;
cursor: pointer;
}
.lof-slidecontent .navigator-content .button-next {
float: left;
text-indent: -999px;
margin-right: 5px;
background: url(../images/arrow-l.png) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
float: left;
text-indent: -999px;
margin-left: 5px;
background: url(../images/arrow-r.png) no-repeat left center;
}
.lof-slidecontent .button-control {
position: absolute;
top: 10px;
right: 10px;
height: 20px;
width: 20px;
cursor: hand;
cursor: pointer;
background: url(../images/transparent_bg.png) repeat;
}
.lof-slidecontent .button-control span {
display: block;
width: 100%;
height: 100%;
}
.lof-slidecontent .action-start span {
background: url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
background: url(../images/pause.png) no-repeat center center;
}JS
Подключаем jQuery, плагин easing и плагин Lof JSliderNews:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="jаvascript" type="text/jаvascript" src="js/jquery.easing.js"></script>
<script language="jаvascript" type="text/jаvascript" src="js/script.js"></script>Далее нужно инициализировать плагин (например, для Демо 1):
$(document).ready(function() {
// кнопки вперед и назад для слайдов
var buttons = {
previous: $('#jslidernews1 .button-previous'),
next: $('#jslidernews1 .button-next')
};
$('#jslidernews1').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 4,
navPosition: 'horizontal', // horizontal
navigatorHeight: 32,
navigatorWidth: 80,
mainWidth: 980,
buttons: buttons
});
});Опции
По умолчанию настройки у плагина стоят такие:
direction : '',
mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click'/* click|mouseenter */,
wapperSelector: '.sliders-wrap-inner',
interval : 5000,
auto : false, // авто проигрывание слайдшоу
maxItemDisplay : 3,
startItem : 0,
navPosition : 'vertical',/* значения: horizontal|vertical*/
navigatorHeight : 100,
navigatorWidth : 310,
duration : 600,
navItemsSelector : '.navigator-wrap-inner li',
navOuterSelector : '.navigator-wrapper' ,
isPreloaded : true,
easing : 'easeInOutQuad', /* смотрите эффекты easing плагина */
onPlaySlider:function(obj, slider){},
onComplete:function(slider, index){ }Пример использования onComplete:function(slider, index){ } смотрите в Демо 6 - в исходнике
