在線演示今天我想要與你分享一個(gè)即簡(jiǎn)單又有趣的圓形幻燈片。這是一個(gè)實(shí)驗(yàn)性的概念，此想法是在一個(gè)特定的角度點(diǎn)擊圓形圖片，就會(huì)翻轉(zhuǎn)到另一個(gè)圓形圖片。分為 三種不同的可能性：頂部、中部、底部。例如，當(dāng)單擊右上部分的圖像時(shí)，將在相關(guān)角度翻轉(zhuǎn)，使它看起來好像我們壓到的那部分翻了過去，顯示出它背面的圖像。
結(jié)構(gòu)：
<div id=“fc-slideshow” class=“fc-slideshow”>
<ul class=“fc-slides”>
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<li><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
</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="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<div class=“fc-overlay-light”></div>
</div>
<div class=“fc-back”>
<div><img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<div class=“fc-overlay-dark”></div>
</div>
</div>
</div>
這個(gè)nav元素有一些空的spans，做為“檢測(cè)領(lǐng)域”。圓的每一邊有三個(gè)可點(diǎn)擊地區(qū)，一個(gè)在上面、一個(gè)在中 間、一個(gè)在底部。i元素將作為導(dǎo)航箭頭，并取決于我們懸浮在哪個(gè)span上，我們將旋轉(zhuǎn)這個(gè)小箭頭到正確的位置。但是我們不會(huì)使用箭頭做為點(diǎn)擊區(qū)域，而是 整個(gè)span。
圓的分區(qū)包含一個(gè)特殊的三維結(jié)構(gòu)：它有一個(gè)前面和一個(gè)背面。一旦我們導(dǎo)航到下一個(gè)或前一個(gè)項(xiàng)目，我們將展示出它的結(jié)構(gòu)并旋轉(zhuǎn)這個(gè)容器，這樣我們可以看到背面。
覆蓋圖提供光線和陰影讓一切看起來更切合實(shí)際，透明度取決于旋轉(zhuǎn)角度。
簡(jiǎn)單插件：
$（ ‘#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）’
};
請(qǐng)注意，這是一個(gè)實(shí)驗(yàn)性的并且只會(huì)在支持CSS 3d變換的瀏覽器上工作。對(duì)其他不支持的瀏覽器只會(huì)有一個(gè)簡(jiǎn)單的回退，僅僅顯示和隱藏了前一個(gè)或后一個(gè)項(xiàng)目。
希望這個(gè)小插件能給你帶來靈感！
via gbtags
來源：跳躍的圓形幻燈片