欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery eislideshow 图片轮播 博客分类: 幻灯片 jQueryeislideshow图片轮播

程序员文章站 2024-03-26 10:40:47
...

在线实例

基础演示 自动播放

使用方法

  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