1

初めての投稿ですが、ご容赦ください。

次のようなスライドショーを作成しようとしています。

  • それぞれに z-index を割り当てます<section>
  • すべてのスライドの不透明度を 0.7 に設定します
  • 現在一番上のスライドに不透明度 1 を割り当てます

HTMLは次のとおりです。

<div id="slides">
  <section class="slide">
    <article>
      <h1>6</h1>
    </article>
  </section>
  <section class="slide">
    <article>
      <h1>5</h1>
    </article>
  </section>
  <section class="slide">
    <article>
      <h1>4</h1>
    </article>
  </section>
  <section class="slide">
    <article>
      <h1>3</h1>
    </article>
  </section>
  <section class="slide">
    <article>
      <h1>2</h1>
    </article>
  </section>
  <section class="slide">
    <article>
      <h1>1</h1>
    </article>
  </section>
</div>
<div id="prev">
  <a href="#previous">&larr;</a>
</div>
<div id="next">
  <a href="#next">&rarr;</a>
</div>

これまでのJSは次のとおりです。

$(document).ready(function() {
  var z = 0;
  var inAnimation = false;

  $('section.slide').each(function() {
    z++;
    $(this).css('z-index', z);
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;

    var processZindex, direction, newZindex, inDeCrease;

    if(isFirst) {
      processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1;
    } else {
      processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1;
    }

    $('section.slide').each(function() {
      if($(this).css('z-index') == processZindex) {
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
          $(this).css('z-index', newZindex)
          .animate({ 'top' : '0' }, 'slow', function() {
            inAnimation = false;
          });
        });
      } else {
        $(this).animate({ 'top' : '0' }, 'slow', function() {
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
        });
      }

      return false;
    }

    $('#next a').click(function() {
      return swapFirstLast(true);
    });

    $('#prev a').click(function() {
      return swapFirstLast(false);
    });
  });
});

次のコードをスクリプトに挿入できると思いました。

if($(this).css('z-index') == processZindex) {
  $(this).css('opacity', 1);
} else {
  $(this).css('opacity', 0.7);
}

$(this).css('z-index') == processZindex問題は、不透明度を 1 にして z-index 値 6 に追いつくことができないようです$(this).css('z-index') != 6。

これをコーディングする簡単な方法はありますか？

4

1 に答える 1

2

, を使用して、z-index の代わりに要素の順序付けを使用しましappendToたpreprendTo。

http://jsfiddle.net/jtbowden/RAT8N/1/

1つの機能が優れているのか、別の機能が優れているのか判断できませんでした。以下に 2 つの別個の関数を示します。

http://jsfiddle.net/jtbowden/5LJcA/3/

それがあなたの目的ですか？

于 2012-04-17T19:29:04.747 に答える