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 - в исходнике