首页 > 特效插件 > 滚动轮播 >  jQuery 360°立体旋转图片轮播效果js代码正文

jQuery 360°立体旋转图片轮播效果js代码

特效介绍
360°立体旋转图片轮播效果js代码
jQuery 360°立体旋转图片轮播效果js代码,完美兼容IE6。带有标题,便于优化
使用方法
1、在头部引入下面的代码:
<link href="images/5imoban.net.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">        
$(document).ready(function() {
    $('#featured-area ul').roundabout({
    easing: 'easeOutInCirc',
    duration: 600
    });
});
</script>
2、在html文档的body中加入下面的代码:
<div id="featured-area">
<ul>
    <li>
        <a href="http://www.5imoban.net/PSDmoban/qiye/2013/1231/95.html">
            <span>深蓝色韩语版装潢公司企业站PSD模板</span>
            <img src="images/1.jpg" alt="深蓝色韩语版装潢公司企业站PSD模板" />
        </a>
    </li>
    <li>
        <a href="http://www.5imoban.net/PSDmoban/qiye/2014/0127/172.html">
            <span>韩国建筑规划公司网站PSD模板和FLA源文件下载</span>
            <img src="images/2.jpg" alt="韩国建筑规划公司网站PSD模板和FLA源文件下载" />
        </a>
    </li>  
    <li>
        <a href="http://www.5imoban.net/texiao/gundongtupian/2014/0118/150.html">
            <span>html5背景晃动的带产品预览图和产品描述的jquery首页轮播效果</span>
            <img src="images/3.jpg" alt="html5背景晃动的带产品预览图和产品描述的jquery首页轮播效果" />
        </a>
    </li>
</ul>
</div>
参数说明:duration: 600    旋转一次的时间,单位毫秒。