jquery实现百叶窗特效的图片轮播

使用方法： 1、引用css文件，css文件里面已经做了注释，基本只需要修改宽高就好了，其他建议不需要修改。 2、引用js2个文件，一个jquery库，一个本特效插件jquery.nivo.slider.pack.js 3、引用html里面代码，代码很少，吧body里面代码全部拷贝，注意id重名，head里面还有一段插件调用的js 4、如果需要显示改图片介绍，可以在img里title里写，在给.nivo-caption p里面设置相关属性，我为了按钮下面的背景，吧文字隐藏了，完美兼容ie6-9, 火狐，谷歌，360,欧朋，遨游、注意额，低版本浏览器会有点卡，指ie6/7

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

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

首先引用文件

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

页面初始化jquery代码如下：

$('#slider').nivoSlider({
    directionNav: true,
    captionOpacity: 0.4,
    controlNav: true,
    boxCols: 8,
    boxRows: 4,
    slices: 15,
    effect:'random',
    animSpeed: 500,
    pauseTime: 3000 });
  });