Слайд между кадрами с помощью JQuery?

Question

Я пытаюсь создать сайт вроде http://justinouellette.com/. Единственная проблема здесь - я запутался с кодом Я бы хотел использовать JQuery вместо MooTools.

Может ли кто-нибудь здесь быть ангелом и написать демо? Я хотел бы иметь возможность переключаться между кадрами с помощью гиперссылок. Кадр будет классом.

Спасибо!

Answer 1

Плагин jQuery Cycle может сделать это, если указать элементы (например, изображения стрелок) для настроек параметров next и prev.

Кто-то, кто недавно задал вопрос, получил аналогичный эффект на своем сайте (который можно увидеть, перейдя по ссылке в своем вопросе ) с EasySlider 1.7 .

Что касается всего окна, вы можете увидеть в Firebug , что образец сайта привязал функцию к window.resize, refigure(), которая устанавливает высоту и ширину каждого кадра в размер окна. Перевод в jQuery должен быть возможен - возможно, что-то вроде этого:

$(document).ready(function() {
    $(window).resize(refigure());
});

и

function refigure() {
    $('.frame').height($(window).height);
    $('.frame').width($(window).width);
}

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

Answer 2

Это самый близкий из готовых плагинов Jquery, который я могу найти, который соответствует вашим потребностям: Step Carousel Viewer v1.8

Подробности на этой странице, вот что вас может заинтересовать (каждый кадр / панель является классом css):

Пример шага Карусель HTML:

<div id="mygallery" class="stepcarousel">
  <div class="belt">

    <div class="panel">
      Panel 1 content here...
    </div>

    <div class="panel">
      Panel 2 content here...
    </div>

    <div class="panel">
      Panel 3 content here...
    </div>

  </div>
</div>

Сложность состоит в том, как заставить каждую панель занимать всю страницу, в то время как кнопки перемещения перемещаются над ними. Больше о проблеме CSS я скажу. Удачи!

Answer 3

Насколько я понимаю ваш вопрос, вам нужна Карусель, есть отличный плагин JQuery под названием JCarousel, который вы можете использовать. Демо Здесь ...