纯js百叶窗效果轮播图插件

这是一款纯js百叶窗效果轮播图插件。该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图。该轮播图由纯js编写，兼容ie8浏览器。

使用方法

在页面中引入imgSwitch.min.js文件。

<script src=""path/to/js/imgSwitch.min.js"></script>
                

HTML结构

该轮播图使用一个<div>元素来包裹一组图片。

<div id="imgContainer">
  <img src="images/1.jpg"/>
  <img src="images/2.jpg"/>
  <img src="images/3.jpg"/>
  <img src="images/4.jpg"/>
  <img src="images/5.jpg"/>
  <img src="images/6.jpg"/>
  <img src="images/7.jpg"/>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，可以通过创建一个imgSwitch()对象来实例化一个轮播图。

window.onload=function(){
  new imgSwitch("imgContainer",{
      Type:12,
      Width:943,
      Height:354,
      Pause:3000,
      Speed:"fast",
      Auto:true,
      Navigate:"numberic",
      NavigatePlace:"outer",
      PicturePosition:"left"})  
}                  
                

配置参数

该轮播图可用的配置参数有：

Auto:true,//是否自动播放
Pause:3000,//暂停的时间
Type:1,//播放类型
Navigate:"numberic",//导航，有三种，分别为no(无),numberic(数字),picture(图片)
Width:874,//图片的宽度
Height:211,//图片的高度
Speed:"normal",//转变的速度
PicturePosition:"inner",
NavigatePlace:"inner"