有趣的圆形幻灯片-FLIPPING CIRCLE SLIDESHOW

 查看演示  website  立即下载

今天我想和大家分享一个有趣的圆形幻灯片。我们可以通过点击左、右、左上、左下、右上、右下6个方向来切换幻灯片，而幻灯片也会朝着指定的方向旋转切换。

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/component.css">
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.flipshow.js"></script>

2、在head标签中加入以下js代码

<script>
$( function() {        
    $( '#fc-slideshow' ).flipshow();
} );
</script>

3、在body标签中加入以下格式的html代码

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

参数配置

 $.Flipshow.defaults = {
	// 默认切换速度 (ms)
	speed : 700,
	// 默认过渡效果
	easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

PREVIOUS:
NEXT:
不一样的层叠照片动画-ANIMATED CSS3 PHOTO STACK
容器滚动条自动显隐-SCROLLBAR WITH JSCROLLPANE