Слайдер-эффект jQuery Coda

// bind the navigation clicks to update the selected nav:
$('#slider .navigation').find('a').click(selectNav);

// handle nav selection - lots of nice chaining 🙂
function selectNav() {
  $(this)
    .parents('ul:first') // find the first UL parent
      .find('a') // find all the A elements
        .removeClass('selected') // remove from all
      .end() // go back to all A elements
    .end() // go back to 'this' element
    .addClass('selected');
}

function trigger(data) {
  // within the .navigation element, find the A element
  // whose href ends with ID ($= is ends with)
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  
  // we're passing the actual element, and not the jQuery instance.
  selectNav.call(el);
}

Мне пришлось отделить selectNavфункцию, потому что она также вызывается, когда пользователь нажимает на навигационные ссылки. Чтобы выполнить это требование, после загрузки страницы нам нужно проверить, есть ли хэш в URL, и если это так, вызвать функцию ‘scrollerComplete’:

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1)});
} else {
  $('#slider .navigation a:first').click();
}

По умолчанию мы запускаем клик по первому элементу навигации, если в URL нет хэша.

Любой эффект запуска ссылки

Требование 5. Любая ссылка на странице, которая ссылается на панель, должна вызывать эффект

Поскольку мы все ленивые разработчики, нам не нужно специально размечать произвольные ссылки на странице, которые должны вызывать этот эффект. Здесь на помощь приходит плагин Ariel localScroll. Просто применив этот плагин с нашими настройками по умолчанию, любая ссылка на странице вызовет эффект. Кроме того, поскольку мы собираемся запустить нашу функцию ‘scrollerComplete’, когда эффект закончится, он будет правильно выбирать связанную навигацию.

Код JQuery

Вот код со всеми вышеупомянутыми требованиями, добавленными. Код прокомментирован, чтобы объяснить, что мы делаем. Я также решил включить требование бонуса — для поддержки горизонтальной или вертикальной прокрутки.

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  
  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels,
  
  navigation: '.navigation a',
  
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',
  
  // allow the scroll effect to run both directions
  axis: 'xy',
  
  onAfter: trigger, // our final callback
  
  offset: offset,
  
  // duration of the sliding effect
  duration: 500,
  
  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

Заворачивать

Это все, что вам нужно для идеального слайдера. У Ариэля есть много других примеров того, как плагины прокрутки могут быть использованы на его веб-сайте, так что проверьте их. Я также опубликую последующий опрос в прошлом месяце. Если у кого-то есть какие-либо вопросы, предложения или лучшие примеры, пожалуйста, поделитесь, оставив комментарий на сайте.