0

最初に、私は JQuery を初めて使用することから始めましょう。これは理想的ではありませんが、適切に学習するためにもっと時間を費やすつもりです。

コード：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

$(document).ready(function () {
    $(".left_hand_icon").on("click", function () {
        $("#slide1").slideLeftShow();
    });
});
$(document).ready(function () {
    $(".right_hand_icon").on("click", function () {
        $("#slide2").slideRightShow();
    });
});
</script>

HTML:

<div class="navigator">

<div class="left_hand_icon">Left</div>
<div class="right_hand_icon">Right</div>
</div>

<div id="slide1">Slide 1 content</div> <!-- displayed by default and i need to slide this away when the next slide is requested -->
<div id="slide2" style="display:none">Slide 2 content</div>
<div id="slide3" style="display:none">Slide 3 content</div>
<div id="slide4" style="display:none">Slide 4 content</div>

何が必要ですか?

私のJSを使用して：

1) left_hand_icon または right_hand_icon をクリックして、現在のコンテンツをスライドさせてから次のコンテンツを表示するにはどうすればよいですか? display:none; を使用しています。それらを非表示にしますが、表示されているときに現在のものを非表示にするにはどうすればよいですか。これで正しい方向に進むのを手伝ってもらえますか?

2) ページが読み込まれると、最初のスライドが表示されます。最初のスライドにいるため、ユーザーが左のスライドをクリックする機能を無効にする方法と、スライドがないために次のボタンをクリックできない最後のスライドに対して同じことを行うにはどうすればよいですか表示されますか？

これで正しい方向に進むのを手伝ってもらえますか?

4

2 に答える 2

1

最初の問題を解決するためにできることは次のとおりです。

  • 次のように、すべての画像 div 要素を親コンテナー要素に配置します。
<div id="container">
    <div id="slide1">Slide 1 content</div>
    <div id="slide2" style="display:none">...
</div>
  • 次に、CSS を親コンテナーに適用する必要があります。これにより、指定された要素を適切なインライン方法で配置するのに役立ち、一度に 1 つずつ表示するのではなく、画像の長いチェーンを形成します。

注:画像の内容に応じて幅と高さを修正し、オーバーフローを非表示に設定して、残りの画像が表示されないようにします。

...
    $('.active').animate({
        left: '-280px';     //or the width + padding/margin of images.
    });

2番目のポイントに来て、現在フォーカスされているオブジェクト（インデックスのみ）を追跡する変数を持つことができ、インデックスが存在する「div」要素の数と等しい場合 [$('div[id*="slide" ]').length] 右のボタンを無効にし、同様に「0」番目のインデックスの左のボタンを無効にすることができます。

同じラフフィドルは：http://jsfiddle.net/vsyg8/3/

これが役に立てば幸いです。どこかで間違っている場合は修正してください。

于 2013-07-14T21:56:26.160 に答える