jQuery响应式人物角色介绍展示插件

alpha-testimonials是一款非常实用的jQuery响应式人物角色介绍展示插件。该插件可以依次展示人物的信息。它有两种布局方式：默认布局和幻灯片布局。在小屏幕设备中，默认布局会转换为幻灯片布局方式。

使用方法

使用该插件需要引入jQuery和alpha.js文件，以及alpha.css文件。

<link href="css/alpha.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/alpha.min.js"></script>               
              

HTML结构

该插件的基本HTML结构如下：

<section id="testimonials">
    <div class="testim-ovl"></div>
    <div class="testimonials-wrapper">
     <ul class="testimonials-line">
       <li class="customer">
           <div class="testimonial-bubble">
               <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc,</p>
           </div>
           <div class="cus-profile">
              <span class="cus-image"><img src="images/te1.jpg"></span>
             <span class="cus-name">
                 Customer
                 <span class="cus-title">His title</span>
              </span>  
           </div>
       </li>
       <li class="customer">
           <div class="testimonial-bubble">
               <p> -- Testimonial here -- </p>
           </div>
           <div class="cus-profile">
              <span class="cus-image"><img src="images/te2.jpg"></span>
              <span class="cus-name">
                 -- client name --
                 <span class="cus-title">--His title--</span>
              </span>   
           </div>
       </li>
       <li class="customer">

           --- keep adding as many as you like --
         
       </li>
       <span id="prev"></span>
       <span id="next"></span>   
     </ul><!-- .testimonials-line -->
  </div><!-- .testimonials-wrapper -->
</section><!-- .testimonials -->               
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件。

$(document).ready(function(){
  $('#testimonials').alpha();
})                
              

配置参数

下面是该插件的一些可用配置参数。