7

javascript/jquery を独学で学ぼうとしているので、Web サイト用の非常に基本的なスライダーを作成するプロジェクトを自分で設定しました。Codeacademy と jQuery API ライブラリを使用して、コードに慣れましたが、構文を理解するのに苦労しています。したがって、私は誰かが私の努力をスペルチェックして助けを求めるためにここに来ています。

コードは次のとおりです。

CSS:

#wrapper { width: 500px; height:300px; display: block; overflow: hidden; }
#slider {width: 1500px; clear: both; margin-left:0;}
.content {float: left; width: 500px; height: 300px; display: block; background:grey;}

HTML:

<div id="wrapper">
    <div id="slider">
        <div class="content"><p>blah</p></div>
        <div class="content"><p>blah</p></div>
        <div class="content"><p>blah</p></div>
    </div>
</div>

<button id="left">left</button>
<button id="right">right</button>

そして最後に：

$#left.click(function {
if ($('#slider').css('margin-left').between(0,-1500)) {
    $('#slider').animate({
        margin-left : "+=500"
    }, 500);
});

}
}

これは、ボタンがクリックされたときに、画像を含む 1500px 幅の div を 500px 移動することに変換されます。スライダーは、500 ピクセルの幅と非表示のオーバーフローを持つコンテナー div 内にあります。if ステートメントは、div がコンテナ div の最後に達した後も左に移動し続けないようにするためのものです。

このかなりわがままな要求を手伝ってくれる人に心から感謝します

4

1 に答える 1

2

これは、上記の構文エラーが修正された js コードと、コードの正常な実行を妨げていた他のいくつかのエラーです。

$('#left').click(function(){
    if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') {       
    $('#slider').animate({
            "margin-left" : "+=500"
        }, 500);
    };
});

注：これに関するドキュメントがどこにも見つからなかったため、コードから . between() 関数を削除しました。この関数への参照がある場合は、ぜひ参照してください。今のところ、単純な値の比較に置き換えました。

コードが機能するjsfiddleは次のとおりです。http://jsfiddle.net/ghCX6/2/

于 2012-08-27T00:36:53.407 に答える