幻灯片放映增加了Z指数并减少了不透明度

Question

首次发布，请耐心等待。

我试图创建幻灯片是：

• 分配的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); 
} 

的问题是，我似乎不能在1得到的不透明度以跟上Z-index值6.因此，我想写为$(this).css('z-index') != 6，但问题发生。

有没有更简单的方法来编码？

Answer 1

我只是用元素，而不是z索引的顺序，使用appendTo，preprendTo：

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

我不能决定，如果一个函数或独立的功能更好。下面是两个单独的函数：

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

是，你要什么？