幻燈片放映增加了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/

是，你要什麼？