Я пытаюсь создать пользовательскую систему переключения на этом демо с помощью кода ниже.
Оба #left
и #right
работают отлично, но у меня есть некоторые проблемы на #sw
которые должны переключаться влево или вправо. Если пользователь выбрал, то нажмите на это, чтобы отобразить слева и кнопку переключения и т.д.
<div class="switchbox">
<div class="btn-group switch">
<button type="button" class="btn btn-default" id="left">Left</button>
<button type="button" class="btn btn-default" id="sw">Switch</button>
<button type="button" class="btn btn-default" id="right">Right</button>
</div>
</div>
И вот Javascript:
var scrollWidth = 49;
var scrollWidthsw = 49;
var pos = 0;
$("p").html(pos);
$("#left").on("click", function () {
$(".switch").animate({
left: '-=' + scrollWidth
}, 300);
pos = pos - scrollWidth;
$("p").html(pos);
});
$("#right").on("click", function () {
$(".switch").animate({
left: '+=' + scrollWidth
}, 300);
pos = pos + scrollWidth;
$("p").html(pos);
});
$("#sw").on("click", function () {
if (pos == 0) {
pos = pos + scrollWidth;
$(".switch").animate({
left: '-=' + scrollWidthsw
}, 300);
} else {
$(".switch").animate({
left: '+=' + scrollWidthsw
}, 300);
}
});
Не могли бы вы дать мне знать, как это исправить?
Проверьте этот обновленный скрипт.
Я добавил дополнительный переменный toggle
для сохранения текущего положения периодического переключения. Это нормально?