今天,我们要与你分享一个简单而有趣的圆形幻灯片。这是一个实验性的概念和想法是翻转一圈在一个特定的角度这取决于我们点击的圆。有三个不同的可能性:,中间和底部。例如,当点击右上方的部分图像,圆圈将在相关的角度翻转,使它看起来好像我们压部分,揭示了未来图像背面的循环。
这就是结构看起来像:
<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>
导航元素有一些空的跨越,成为“检测领域”。两边的圆有三个区域,点击,一个在顶部,一个在中间,一个在底部。我元素将作为一个导航箭头,这取决于跨我们徘徊,我们将旋转右边的小箭头箱子的地方。但是我们不会使用箭头点击区域,但整个跨度。
圈翻转的部门包含一个特殊的三维结构:它有一个正面和背面。
$( '#fc-slideshow' ).flipshow();
这是插件的选项:
$.Flipshow.defaults = {
// default transition speed (ms)
speed : 700,
// default transition easing
easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};