欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 幻灯片和轮播图 > 支持4种类型的jQuery轮播图插件EasySlides

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

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

关键词:轮播图,焦点图,jquery轮播图,jquery轮播图插件,jquery简单轮播图,jquery封面轮播图,jquery圆形轮播图,jquery图片轮播插件,jquery.easy_slides.js,jquery库,lunbo

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

简要教程

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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_lunbo/8795.html

 在线演示  免费下载
编号:201804110000008795
大小:0.04MB
上传时间:2018-04-12 19:00
素材由用户"zx5358718"上传分享。

标签

最新推荐素材

与支持4种类型的jQuery轮播图插件EasySlides相关的素材

.