Ответ 1

Посмотрите, что скрипта:

https://jsfiddle.net/gjyswrr9/19/

Проблемы были в трех местах:

var previous = parseInt(current, 10) - 1;
var next = parseInt(current) + 1;

(они были строками, а не ints).

И

current = target_id.split('-')[1] - 1 || 0;

(вы считаете ссылки, начинающиеся с 1)

Надеюсь, что он работает так, как вам нужно.

Ответ 2

Здесь вы идете → fiddle

В основном я изменил ваше значение current, которое вы определяете в своей функции щелчка. Фактически, ваше значение id представляет собой строку, поэтому стрельба nextElement() не изменит значение, вместо этого оно будет конкатенацией. Это приводит к некоторому странному поведению, поэтому вместо изменения от целевого 0 до 1 вы просто изменяетесь от 0 до 01.

Также я скорректировал ваш $('.slideshow-timeline a').click(function() { }, чтобы вести себя так же, как и ваша функция nextElement().

Изменить: Я забыл упомянуть

Я считаю, что большинство зонда лежит внутри этой строки кода:

current = target_id.split('-')[1] || 0;

Ты был прав. Как упоминалось выше, target_id.split('-')[1] вернет вам строковое значение, а не число, и это снова, как упоминалось выше, приводит к странному поведению, когда ваш код просто объединяет возвращаемую строку с номером. Чтобы достичь желаемой цели, вам необходимо проанализировать значение target_id.split('-')[1] в значение number с помощью встроенной функции parseInt() JavaScripts.

В результате получается следующее:

current = parseInt(target_id.split('-')[1]) || 0;

Ответ 3

Привет. Вы можете проверить ссылку ниже.

Это то, что вы ищете правильно?

Пожалуйста, перейдите по этой ссылке   [JsFiddle] [1]

[1]: https://jsfiddle.net/gjyswrr9/39/

Script, как показано ниже,

$(document).ready(function() {

var current = 0;

function previousIndex() {
var previous = parseInt(current,10) - 1;
if(previous == 0) {
    previous = $(".tour-panel").size();
}
return previous;
}

function nextIndex() {
var next = parseInt(current,10) + 1;
if(next == $(".tour-panel").size()+1) {
next = 1;
}
return next;
}

function removeClasses() {
$(".tour-panel").each(function(index) {
if(index != current) {
  $(this).removeClass("active-tour fadeInRight fadeInLeft fadeOutRight fadeOutLeft");
}
})
}

function nextElement() {
removeClasses(); 
current = nextIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInRight");
 }, 50);
 }

function previousElement() {
removeClasses();
current = previousIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInLeft");  
}, 50);
setTimeout(function() {
$($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight");
}, 750);
}


$('.slideshow-timeline a').click(function() {
  var target_id = $(this).attr('href');
removeClasses();
$($(".tour-panel")[current]).addClass("fadeOutRight");
setTimeout(function() {
    $(target_id).addClass("active-tour fadeInLeft");
}, 50);
setTimeout(function() {
    $($(".tour-panel")[current]).removeClass("fadeOutRight");
}, 750);
current = target_id.split('-')[1] || 0;
});


Mousetrap.bind('left', previousElement);
Mousetrap.bind('right', nextElement);

$(".previous").click(previousElement);
$(".next").click(nextElement);
});

Ответ 4

Вы были правы... проблема была в этой строке:

current = target_id.split('-')[1] || 0;

попробуйте следующее:

current = (target_id.split('-')[1] - 1) || 0; // cater for zero-index

UPDATE

• В ходе дальнейшего расследования я обнаружил несколько вещей на вашем fiddle (12 февраля-16): "li для" Connect "," Convert "и" Optimize "находятся за пределами" ul "выше - я предполагаю, что там, где они должны быть.
• Иды для упомянутого выше слова не соответствуют вашему соглашению об именах ( "target-1", "target-2" и т.д.). Это наверняка приведет к тому, что стратегия, используемая здесь, потерпит неудачу.
• Должны быть соответствующие элементы div для каждого "li"... в вашем fiddle, элементы для вышеупомянутого 'li отсутствуют.

Устранены некоторые проблемы с этим fiddle.