Плагин слайдшоу базирующийся на 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;
}

javascript

Подключаем jQuery, плагин easing и плагин Lof JSliderNews:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
     <script language="javascript" type="text/javascript" src="js/script.js"></script>

Далее нужно инициализировать плагин (например, для Демо 1):

<script type="text/javascript">
 $(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 } );   
    });
</script>

Опции

По умолчанию настройки у плагина стоят такие:

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

Офф. страница плагина: http://landofcoder.com/jquery-plugins/lof-jslidernew-plugin.html

СКАЧАТЬСкачек: 4845
1,85 Mb
Кто скачал?

ДЕМОПосмотреть
пример