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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 支持4种类型的jQuery轮播图插件EasySlides
支持4种类型的jQuery轮播图插件EasySlides
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-07
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

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

网友评论