支持4种类型的jQuery轮播图插件EasySlides

EasySlides是一款支持4种类型的jQuery轮播图插件。该jquery轮播图采用响应式设计，支持移动设备，内置有大图轮播，多图轮播，封面轮播和圆形轮播四种轮播图模式可供选择。

使用方法

在页面中引入jquery和jquery.easy_slides.js文件，以及样式文件jquery.easy_slides.css。

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

HTML结构

四种轮播图的HTML结构和初始化方法分别如下：

1、大图轮播模式：

<div class="slider slider_one_big_picture">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="next_button">NEXT</div>  
  <div class="prev_button">PREV</div>  
  <div class="nav_indicators"></div>
 </div>       
                

$('.slider_one_big_picture').EasySlides()        
                

2、多图轮播模式

<div class="slider slider_one_big_2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div class="nav_indicators"></div>
  </div>    
                

$('.slider_one_big_2').EasySlides({
    'autoplay': false,
    'stepbystep': true,
    'show': 5,
    'loop': true
})    
                

3、封面轮播模式

<div class="slider slider_circle_10">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div class="next_button"></div>
      <div class="prev_button"></div>
  </div>                  
                

$('.slider_circle_10').EasySlides({
    'autoplay': true,
    'show': 13
})   
                

4、同时显示4幅图片模式

<div class="slider slider_four_in_line">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div class="next_button"></div>
    <div class="prev_button"></div>
</div>                 
                

$('.slider_four_in_line').EasySlides({
    'autoplay': true,
    'show': 9
})
                

5、圆形轮播模式

<div class="slider slider_clock">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div class="next_button"></div>
    <div class="prev_button"></div>
</div>                
                

$('.slider_clock').EasySlides({
    'autoplay': true,
    'stepbystep': false,
    'show': 15
})
                

各种轮播图的具体效果请参考演示页。

配置参数

该jQuery轮播图的可用配置参数有：

{
  'autoplay': false,
  'timeout': 3000,
  'show': 5,
  'vertical': false,
  'reverse': false,
  'touchevents': true,
  'delayaftershow': 300,
  'stepbystep': true,
  'startslide': 0,
  'loop': true,
  'distancetochange': 10,
  'beforeshow': function () {},
  'aftershow': function () {},
}
                  
                

EasySlides.js jQuery轮播图插件的github地址为：https://github.com/IvanShabanov/EasySlides