jQuery eislideshow 图片轮播

在线实例

基础演示

自动播放

使用方法

1. <div id="ei-slider" class="ei-slider">  
2.     <ul class="ei-slider-large">  
3.         <li> 
4.             <img src="images/large/4.jpg" alt="image04" /> 
5.             <div class="ei-title"> 
6.                 <h2> 
7.                     <a href='#' target='_blank'>手风琴菜单</a> 
8.                 </h2> 
9.                 <h3> 
10.                     手风琴 
11.                 </h3> 
12.             </div> 
13.         </li> 
14.     </ul>  
15.     <ul class="ei-slider-thumbs">  
16.         <li class="ei-slider-element">Current</li>  
17.         <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>  
18.         <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>  
19.         <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>  
20.     </ul>  
21. </div>

复制

1.     $(function() { 
2.         $('#ei-slider').eislideshow({ 
3.             easing: 'easeOutExpo', 
4.             titleeasing: 'easeOutExpo', 
5.             titlespeed: 1200 
6.         }); 
7.     });

复制

参数详解

参数	描述	默认值
eislideshowAPI参数
animation	动画效果。sides || center	sides
autoplay	自动播放	false
slideshow_interval	轮播间隔时间，单位毫秒	3000
speed	焦点图滑动动画时间	800
titlespeed	标题滑动动画时间	800
thumbMaxWidth	缩略图最大尺寸	150

下载