Jumping round Slide

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Online Demo: gbtags.com/gb/share/424.htm

Today I want to share with you a simple and interesting circular slide. This is an experimental concept, the idea is to click a circular picture at a specific angle, and it will flip to another circular picture. Divided into three different possibilities: top, middle, bottom. For example, when you click an image in the upper-right section, it flips at the relevant angle, making it look as if the part we're pressing over and showing the image on the back of it.

Structure：

<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 " 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>

We change it to:

<div id= "Fc-slideshow" class= "Fc-slideshow" > <ul class= "fc-slides" > <!--...--> </ul> <nav& Gt; <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" >

This nav element has some empty spans as a "detection field". Each side of the circle has three clickable regions, one on top, one in the middle and one at the bottom. The I element will act as a navigation arrow, and depending on which span we hover over, we will rotate this small arrow to the correct position. But we don't use the arrow as the Click Area, but the entire span.

A circular partition contains a special three-dimensional structure: it has a front and a back. Once we navigate to the next or previous item, we will show its structure and rotate the container so that we can see the back.

Overlay charts provide light and shading to make everything look more realistic, and transparency depends on the angle of rotation.

Simple plugins:

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

Add these and become optional plugins:

The options $. Flipshow.defaults = {//Default transitions speed (ms) speed:700,//default transitions easing: ' Easing (. 2 9,1.44,.86,1.06) '};

Note that this is an experimental and will only work in browsers that support CSS 3d transformations. For other browsers that are not supported, there will only be a simple fallback, showing and hiding only the previous or last item.

Hope this widget can bring you inspiration!

Via Gbtags

Source: Jumping Round Slides

Date: 2013-3-8 Source: gbin1.com