特效介绍
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 旋转一次的时间,单位毫秒。