У меня есть изображение, когда я навожу на него курсор, я могу просматривать стрелки влево и вправо... когда я нажимаю стрелку, я меняю исходный атрибут изображения с помощью jquery... поэтому мне удалось изменить изображения на щелкая стрелки.. что я хочу, так это то, как мне получить ощущение слайд-шоу... анимация, при которой текущее изображение скользит вправо, а новое изображение скользит слева при нажатии стрелки влево... пожалуйста, помогите мне с это... я не хочу использовать уже существующие плагины... Заранее спасибо...
jquery фото слайд
Ответы (3)
Для этого у меня было бы два блока, один для старого изображения и один для нового (оба со скрытым переполнением).
Исходные позиции:
old - normal new - right margin = width of image
На галочке анимации, например. каждые 0,05 секунды
old - left margin+1 new right margin-1
Пока старое не уйдет, а новое не войдет.
person
cjk
schedule
05.03.2010
Я бы посоветовал вам использовать анимационные функции JQuery. Дополнительные сведения см. на странице http://api.jquery.com/animate/.
person
uriDium
schedule
05.03.2010
это сделанная на заказ анимация, пожалуйста, найдите скрипку
$('.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');
});
person
kavinhuh
schedule
16.04.2015