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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带多种切片过渡动画效果的jQuery幻灯片插件
带多种切片过渡动画效果的jQuery幻灯片插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-06-23
    阅读:
麦子学院
简要教程

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

网友评论