JQuery фото слайд - PullRequest
Новая
       21

JQuery фото слайд

0 голосов
/ 05 марта 2010

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

Ответы [ 3 ]

2 голосов
/ 05 марта 2010

Для этого у меня будет два блока, один для старого изображения и один для нового (оба со скрытым переполнением).

Исходные позиции: 

  old - normal
  new - right margin = width of image

На анимации отметьте, например, каждые 0,05 с 

  old - left margin+1
  new right margin-1

Пока старое не соскользнуло, а новое не соскользнуло.

0 голосов
/ 16 апреля 2015

это пользовательская анимация, пожалуйста, найдите скрипку 

    $('.arrowRight').on('click', function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var prevLandscape = currLandscape.prevAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var prevDesc= currDesc.prevAll(".hiddenDesc").first();

    if (prevLandscape.length == 0) {
        prevLandscape = currLandscape.siblings('.hiddenImg').last();
    }
    if (prevDesc.length == 0) {
        prevDesc= currDesc.siblings('.hiddenDesc').last();
    }

    prevLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    prevLandscape.removeClass('hiddenImg').addClass('currImg');
});


$('.arrowLeft').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "left" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});
0 голосов
/ 05 марта 2010

Я бы посоветовал вам использовать анимационные функции JQuery. Посмотрите на http://api.jquery.com/animate/ для получения дополнительной информации.

...