0

コーディングを始めたのは1、2か月前で、解決策が見つからないような問題が発生しました。

ボタンをクリックすると開くスライドショーがありますが、問題は、ページの読み込み時にスライドショー自体のコントロールの1つ(「右コントロール」)が表示されることです。

スライドショーが開いたときに「スライド」と一緒にフェードインし、スライドショーを閉じたときに非表示にする必要があります。

どんな助けでもいただければ幸いです。

スライドショーのコードは次のとおりです。

//スライドショー

$("#slideshow").css("overflow", "hidden");

manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition);

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position) {

    if (position === 0) {
        $('#left-control').hide();
    } else {
        $('#left-control').show();
    }

    if (position == slidesNumber - 1) {
        $('#right-control').hide();
    } else {
        $('#right-control').show();
    }
}
//End Slideshow

これが私のjsFiddleと完全なコードです:

http://jsfiddle.net/tVsjY/2/

4

3 に答える 3

0

コーディングを始めたばかりの人に解決策ではなく修正を与えるのはちょっと恥ずかしいと思いますが、おそらくそれだけです。jsfiddleの50行目に次のように配置すると、余分な可視スパンを非表示にして問題を修正できます。

$('.control').hide();

しかし、私がこれにあまり満足していない理由は、そもそもなぜそのスパンが現れるのかを学び、説明することができなかったからです。私はおそらくそれを見続けるでしょう、しかしこれがあなたが探していたすべてであるかどうか私に知らせてください。


更新された解決策:問題/解決策を見つけましたmanageControls関数で非表示/表示するコントロールは、常に1つを非表示にし、1つを表示します。

問題:最初は両方のコントロールが表示されます。
最初にmanageControls(currentPosition);を呼び出します。38行目。currentPositionの値は0であるため、左側のコントロールが非表示になり、右側が表示されます。これは、最初からすでに表示されています。

解決策: manageControls(currentPosition);を置き換えます。次の38行目:

$('.control').hide(); //Hides both controls



すべてがうまくいく/意味があるかどうか教えてください:)

于 2013-02-06T05:26:15.000 に答える
0

に論理エラーがあります

function manageControls(position){}

その関数を2つの目的で使用しています。

  1. 自分がどのスライドであるかに応じて、左右のコントロールを表示/非表示にします
  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
});

ただし、コードを確認する必要があります。初心者の方もいらっしゃるかもしれませんが、常にコードの最適化に取り組む必要があります。そして、あなたのコードにはそれが必要です。

于 2013-02-06T06:06:46.057 に答える
0

私がする必要があることの回避策を見つけました。

manageControls関数は、#slidesの現在の位置に応じて左/右のコントロールを非表示/表示するため、ロード時に.controlを非表示にするために必要なのは、#slidesも非表示にすることだけです。

したがって、9行目に次のように配置すると次のようになります。

$("#center, #slideshow, .slide").hide();

次に、クリックして表示します-動作します!

最新の更新:

次の行を追加して、見た目に美しく見えるようにしました(コントロールがフェードインして表示されるようになりました)。

    $(".control").stop(true).delay(1800).animate({opacity: "0.5"}, 2000);

    $(".control").stop(true).animate({opacity: "0"}, 400);

これが私の更新されたjsFiddleです:

http://jsfiddle.net/tVsjY/18/

追伸:まだきれいではありません。スライドショーがアクティブになったときに、これら2つのコントロールをフェードインおよびフェードアウトする必要があります。次にそれに取り組み、更新を投稿します。

于 2013-02-08T05:15:47.367 に答える