跳躍的圓形幻燈片

今天我想要與你分享一個即簡單又有趣的圓形幻燈片。這是一個實驗性的概念，此想法是在一個特定的角度點擊圓形圖片，就會翻轉到另一個圓形圖片。分為 三種不同的可能性：頂部、中部、底部。例如，當單擊右上部分的圖像時，將在相關角度翻轉，使它看起來好像我們壓到的那部分翻了過去，顯示出它背面的圖像。

結構：

<div id="fc-slideshow" class="fc-slideshow">
    <ul class="fc-slides">
        <li><img src="images/1.jpg" /><h3>Hot</h3></li>
        <li><img src="images/2.jpg" /><h3>Cold</h3></li>
        <li><img src="images/3.jpg" /><h3>Light</h3></li>
        <li><img src="images/4.jpg" /><h3>Dark</h3></li>
        <li><img src="images/5.jpg" /><h3>Soft</h3></li>
        <li><img src="images/6.jpg" /><h3>Hard</h3></li>
        <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
        <li><img src="images/8.jpg" /><h3>Rough</h3></li>
    </ul>
</div>

我們把它改成：

<div id="fc-slideshow" class="fc-slideshow">

    <ul class="fc-slides">
        <!-- ... -->
    </ul>

    <nav>
        <div class="fc-left">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-left"></i>
        </div>
        <div class="fc-right">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
    </nav>

    <div class="fc-flip">
        <div class="fc-front">
            <div><img src="images/4.jpg"><h3>Dark</h3></div>
            <div class="fc-overlay-light"></div>
        </div>
        <div class="fc-back">
            <div><img src="images/5.jpg"><h3>Soft</h3></div>
            <div class="fc-overlay-dark"></div>
        </div>
    </div>
</div>

這 個nav元素有一些空的spans，做為“檢測領域”。圓的每一邊有三個可點擊地區，一個在上面、一個在中 間、一個在底部。i元素將作為導航箭頭，并取決于我們懸浮在哪個span上，我們將旋轉這個小箭頭到正確的位置。但是我們不會使用箭頭做為點擊區域，而是 整個span。

圓的分區包含一個特殊的三維結構：它有一個前面和一個背面。一旦我們導航到下一個或前一個項目，我們將展示出它的結構并旋轉這個容器，這樣我們可以看到背面。

覆蓋圖提供光線和陰影讓一切看起來更切合實際，透明度取決于旋轉角度。

簡單插件：

$( '#fc-slideshow' ).flipshow();

加上這些，變成可選的插件：

// the options
$.Flipshow.defaults = {
    // default transition speed (ms)
    speed : 700,
    // default transition easing
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

請注意，這是一個實驗性的并且只會在支持CSS 3d變換的瀏覽器上工作。對其他不支持的瀏覽器只會有一個簡單的回退，僅僅顯示和隱藏了前一個或后一個項目。

希望這個小插件能給你帶來靈感！

來源：跳躍的圓形幻燈片