に論理エラーがあります
function manageControls(position){}
その関数を2つの目的で使用しています。
- 自分がどのスライドであるかに応じて、左右のコントロールを表示/非表示にします
- スライダーが表示されているか非表示になっているかに応じて、左右のコントロールを表示/非表示にします。
しかし、それは常に最初のシナリオであるかのように機能します。私の提案は、関数に別のパラメータを追加することです。
function manageControls(position, flag){}
「表示」、「非表示」、「チェック」のフラグで値を送信して、両方のコントロールを表示し、両方のコントロールを非表示にし、スライド番号に関連して表示します。そして、状況に応じて関数呼び出しを書き直します。
cssの.controlのdisplayプロパティを「none」に設定します。そして、jsで次の変更を加えます。
$(document).ready(function () {
var out = 0;
var currentPosition = 0;
var slideWidth = 400;
var slides = $(".slide");
var slidesNumber = slides.length;
$("#button").click(function () {
if (out === 0) {
manageControls(currentPosition, 'show'); // Show controls on slide show
$("#center, #slideshow, .slide").animate({
width: "400px"
}, {
queue: false,
duration: 1900
});
$(".slide").delay(2000).animate({
opacity: "1"
}, 1500);
out = 1;
} else {
manageControls(currentPosition, 'hide'); // Hide controls on slide hide
$("#center, #slideshow, .slide").animate({
width: "0px"
}, {
queue: false,
duration: 2000
});
$(".slide").stop(true).animate({
opacity: "0"
}, 250);
out = 0;
}
});
//Slideshow
$("#slideshow").css("overflow", "hidden");
// No need for this line if .control set to hidden in css.
//manageControls(currentPosition);
$('.control').click(function () {
currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;
manageControls(currentPosition, 'check'); // Show/hide controls on control click
$('#slides').animate({
'left': slideWidth * (-currentPosition)
}, 600);
});
function manageControls(position, flag) {
// Checks for control display
if (flag == 'check') {
if (position === 0) {
$('#left-control').hide();
} else {
$('#left-control').show();
}
if (position == slidesNumber - 1) {
$('#right-control').hide();
} else {
$('#right-control').show();
}
} else if (flag == 'show') {
$('.control').show();
} else if (flag == 'hide') {
$('.control').hide();
}
}
//End Slideshow
});
ただし、コードを確認する必要があります。初心者の方もいらっしゃるかもしれませんが、常にコードの最適化に取り組む必要があります。そして、あなたのコードにはそれが必要です。