Итак, я немного новичок в jQuery, но у меня есть опыт нескольких месяцев. Мой вопрос идет так.Создание слайдера изображения jQuery с анимацией
Я построил слайдер изображения, который проходит через div и анимирует фотографии, «скользящие вправо налево», когда я нажимаю кнопку «СЛЕДУЮЩИЙ». Моя проблема, однако, меняет его на «сползать влево» вправо, когда я нажимаю предыдущую кнопку.
В моем коде я пытался двигаться мой анимировать запас-left.fadeOut заявление в если БТН имеет класс следующий условно, и замена его .queue(function), .css(function), .animate(function) и несколько других, но ничего не кажется, работает, и я не могу оставить его в верхней строке, потому что он влияет на предыдущее условие, которое я хочу работать в обратном направлении, что моя следующая кнопка идет.
Я был очень застрял на этом в течение нескольких недель, и я продолжаю возвращаться к этой точке, которая работает на полпути. Может кто-нибудь направить меня в правильном направлении. Я в тупике.
Вот что у меня есть.
<body>
<section class="photos">
<div class="slider">
<div class="photo">
<img src="images/photoOne.png">
</div>
<div class="photo hidden">
<img src="images/photoTwo.png">
</div>
<div class="photo hidden">
<img src="images/photoThree.png">
</div>
</div>
<div class="buttons">
<a href="#" class="btn prev">Previous</a>
<a href="#" class="btn next">Next</a>
</div>
</section>
</body>
<script src="jquery-1.9.1.js"></script>
<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).animate({
"margin-left": "-=744px"}, "fast").fadeOut(function() {
if ($btn.hasClass('next')) {
if (activePhoto == $photoBox.length - 1) {
activePhoto = 0;
} else {
activePhoto++;
}
$photoBox.eq(activePhoto - 1).css({
"margin-left": "+=744px"
});
$photoBox.eq(activePhoto).css({
"margin-left": "+=744px"
});
$photoBox.eq(activePhoto).fadeIn().animate({
"margin-left": "-=744px"
}, "fast");
} else if ($btn.hasClass('prev')) {
if (activePhoto == 0) {
activePhoto = $photoBox.length - 1;
} else {
activePhoto--;
}
}
});
});
</script>
Как я уже сказал, это прекрасно работает, как это, когда я щелкаю дальше, но заставить его делать противоположное, когда я нажимаю предыдущий дает мне проблемы. Если это имеет смысл, это то, что я пытался сделать с моим jQuery.
<script>
var activePhoto = 0;
$('.btn').click(function() {
var $btn = $(this);
$photoBox.eq(activePhoto).queue(function() {
if ($btn.hasClass('next')) {
if (activePhoto == $photoBox.length - 1) {
activePhoto = 0;
} else {
activePhoto++;
}
$photoBox.eq(activePhoto - 1).animate({
"margin-left": "-=744px"}, "fast").fadeOut();
$photoBox.eq(activePhoto - 1).css({"margin-left": "+=744px"});
$photoBox.eq(activePhoto).css({"margin-left": "+=744px"});
$photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "-=744px"}, "fast");
} else if ($btn.hasClass('prev')) {
if (activePhoto == 0) {
activePhoto = $photoBox.length - 1;
} else {
activePhoto--;
}
$photoBox.eq(activePhoto + 1).animate({"margin-left": "+=744px"}, "fast").fadeOut();
$photoBox.eq(activePhoto + 1).css({"margin-left": "-=744px"});
$photoBox.eq(activePhoto).css({"margin-left": "-=744px"});
$photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "+=744px"}, "fast");
}
});
});
</script>
Я надеюсь, что имеет смысл :)
Вот два jsfiddles у меня есть на моем примере. Возможно, это покажет мою проблему для вас. Первый способ заключается в том, как в данный момент он работает со следующей кнопкой, а изображения сдвигаются справа налево. Во-вторых, это то, что я пытаюсь сделать, обратная сторона анимации для предыдущей кнопки с изображением, скользящим справа от надписи, последующее изображение затухает слева от надписи и затем скользит над надписью. Во втором примере ни предыдущие, ни следующие кнопки не работают должным образом.
http://jsfiddle.net/jay_dub/dtdZc/
http://jsfiddle.net/jay_dub/naKub/
Если вы публикуете вопросы, пожалуйста, убедитесь, что ваш код имеет отступ, и что вы добавляете какое-то форматирование, иначе его действительно трудно прочитать. Является ли это прямой копией и прошлым кода js? Потому что этот код имеет несоответствующий '});' в конце, который будет синтаксической ошибкой и будет препятствовать запуску вашего кода. –
Я пропустил новую строку после того, как «Вот что я до сих пор». Поэтому некоторый код html не отображается. Я попытался исправить, но мое редактирование было отклонено;). Поэтому, пожалуйста, добавьте новую строку самостоятельно, чтобы весь html-код был показан снова, извините за мою ошибку во время редактирования. –
Я забыл добавить функцию btn click и мою переменную для кнопки и исправил форматирование, чтобы HTML отображался снова. –