jQuery洗牌式3D旋转图片切换特效

一款jQuery洗牌式3D旋转图片切换特效，后面的图片不断地进行3D旋转切换到最前面，可以点击不同的图片来切换，没有鼠标动作的时候图片为自动循环轮播效果。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面样式文件、jQuery库和其他的JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-shapes.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style type="text/css">
body,html{ background-color: #333333; }
</style>

页面的body部分，需设置好图片的ul无序列表，代码如下：

<div id="header">
<div id="gla">
	<div id="gla_box">
    	<ul>
        	<li>
            	<div class="gla_inbox">
                	<p>Picture info 1</p>
                    <img src="images/01.png" />
                    <a href="#">learn more</a>
                </div>
            </li>
            
        	<li>
            	<div class="gla_inbox">
                	<p>Picture info 2</p>
                    <img src="images/02.png" />
                    <a href="#">learn more</a>
                </div>
            </li>
            
        	<li>
            	<div class="gla_inbox">
                	<p>Picture info 3</p>
                    <img src="images/03.png" />
                    <a href="#">learn more</a>
                </div>
            </li>
            
        	<li>
            	<div class="gla_inbox">
                	<p>Picture info 4</p>
                    <img src="images/04.png" />
                    <a href="#">learn more</a>
                </div>
            </li>
            
        	<li>
            	<div class="gla_inbox">
                	<p>Picture info 5</p>
                    <img src="images/05.png" />
                    <a href="#">learn more</a>
                </div>
            </li>
            
        </ul>
    </div>
</div>