Небольшое усовершенствование предыдущего проекта: добавление индикатора цикла

Ротируемые прилепленные записи — превосходное решение для сохранения свободного пространства сайта. В данной статье мы несколько усовершенствуем наш проект, добавив индикатор слайдов, чтобы пользователь знал, сколько записей ему будет продемонстрировано, и всегда мог переместиться к интересующей его записи. Давайте приступим к реализации указанного решения.

Для начала нам понадобится создать небольшой интерфейс. Внутри обертки #stickyRotate из предыдущей статьи я размещу код, отвечающий за добавление блока div следом за последней прилепленной записью:

...
jQuery('.sticky:last')
.after('<div id="stickyNav"
  style="position: absolute; padding: 10px 0 0 0; margin-top: 280px;
  height: 25px; width: 650px; color: #eee; background: #000;
  text-align: center"></div>');
...

Над этим фрагментом нам понадобится расположить jQuery код, отвечающий за вывод числового индикатора записи:

...
jQuery('.sticky')
       .each( function (i){
          jQuery('#stickyNav').fadeTo(0, 0.8)
          .append("<div class='sN'
            style='display:inline; margin: 0 5px; 
            border: 1px solid #999;
            padding: 2px 5px;'>"+(i+1)+"</div> ");
    });
... 

Наконец, для достижения требуемого эффекта, мы должны вернуться к нашей функции loopStickies и несколько изменить .animate(), добавив к ней функцию обратного вызова. Результирующий код будет выглядеть следующим образом:

...
jQuery('.sticky')
     .each( function (i){
        
        jQuery(this)
        /*make sure each div is on it's own z-index*/
        .css('z-index','i+10')
        
       .animate({'backgroundColor': '#000000'}, i*duration, 
function(){
          jQuery(this).fadeIn('slow');
          
          //interactivity
          jQuery("#stickyNav .sN").css('color','#666666');
          jQuery('#stickyNav .sN:eq('+i+')').css('color','#ffffff');
        }
        );//end animate
     }); //end each
...

Селектор :eq() позволяет вывести номер записи и выделить его среди других номеров. Результат представлен на следующем скриншоте: