带多种切片过渡动画效果的jQuery幻灯片插件

transformer.js是一款效果非常炫酷的带多种切片过渡动画效果的jQuery幻灯片插件。该幻灯片可以设置6种切片过渡效果，且该幻灯片兼容IE8浏览器，非常实用。

使用方法

使用该幻灯片插件需要在页面中引入jquery和transformer.js文件。

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/transformer.js"></script>                  
                

HTML结构

该幻灯片实用嵌套<div>的HTML结构，图片的描述信息可以使用一个<p>元素来制作。

<div id="ImageSlider">
  <div id="gellery">
    <div>
      <img  src="img/1.jpg">
      <p>图片描述信息...</p>
    </div>
    <div>
      <img src="img/2.jpg">
      <p>图片描述信息...</p>
    </div>
    <div>
      <img src="img/3.jpg">
      <p>图片描述信息... 
      </p>
    </div>  
  </div>
</div>       
                

CSS样式

需要为该幻灯片添加以下一些CSS样式：

 #ImageSlider{
  height:380px;
  width:800px;
  text-align:left;
}
#gellery{
  height:380px;
  width:800px;
  text-align:left;
  position:absolute;  
}
#ImageSlider #loader{
  background:url(img/loading_animated.gif) no-repeat;
  height:65px;
  width:65px;
  margin-top:150px;
  margin-left:355px;
  position:absolute;
  z-index:400;
}
#gellery div{ 
  position:absolute; 
  overflow:hidden;
  height:428px;
  width:981px;
  text-align:left;
  display:none;
}
#gellery img{
  position:absolute;
  height:380px;
  width:800px;
  text-align:left;
}                 
                

初始化插件

在页面DOM元素加载完毕之后，可以通过transformer()方法来初始化该幻灯片插件。

$(document).ready(function(){
   $('#gellery').transformer({
            __Effects:new Array('Optimus','Ironhide','Scorponok','Megatron','Starscream','Jazz'),   
            __Columns:7,
            __Rows:3,
            __Speed:10000,
            __Title_Height:100,
            __Title_Width:0,
        });
)};               
                

transformer.js幻灯片插件的github地址为：https://github.com/rakibulalam/transformer.js