幻灯片/轮播

EasySlides - 图片轮播图jQuery插件

创客主机

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

使用方法

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

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

HTML结构

四种轮播图的HTML结构和初始化方法分别如下:
1、大图轮播模式:

  1. <div class="slider slider_one_big_picture">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div>3</div>
  5.   <div>4</div>
  6.   <div>5</div>
  7.   <div>6</div>
  8.   <div>7</div>
  9.   <div>8</div>
  10.   <div>9</div>
  11.   <div class="next_button">NEXT</div>  
  12.   <div class="prev_button">PREV</div>  
  13.   <div class="nav_indicators"></div>
  14.  </div>
  1. $('.slider_one_big_picture').EasySlides()

2、多图轮播模式

  1. <div class="slider slider_one_big_2">
  2.       <div>1</div>
  3.       <div>2</div>
  4.       <div>3</div>
  5.       <div>4</div>
  6.       <div>5</div>
  7.       <div>6</div>
  8.       <div>7</div>
  9.       <div>8</div>
  10.       <div>9</div>
  11.       <div class="nav_indicators"></div>
  12.   </div>
  1. $('.slider_one_big_2').EasySlides({
  2.     'autoplay': false,
  3.     'stepbystep': true,
  4.     'show': 5,
  5.     'loop': true
  6. })

3、封面轮播模式

  1. <div class="slider slider_circle_10">
  2.       <div>1</div>
  3.       <div>2</div>
  4.       <div>3</div>
  5.       <div>4</div>
  6.       <div>5</div>
  7.       <div>6</div>
  8.       <div>7</div>
  9.       <div>8</div>
  10.       <div>9</div>
  11.       <div class="next_button"></div>
  12.       <div class="prev_button"></div>
  13.   </div>
  1. $('.slider_circle_10').EasySlides({
  2.     'autoplay': true,
  3.     'show': 13
  4. })

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

  1. <div class="slider slider_four_in_line">
  2.     <div>1</div>
  3.     <div>2</div>
  4.     <div>3</div>
  5.     <div>4</div>
  6.     <div>5</div>
  7.     <div>6</div>
  8.     <div>7</div>
  9.     <div>8</div>
  10.     <div>9</div>
  11.     <div class="next_button"></div>
  12.     <div class="prev_button"></div>
  13. </div>
  1. $('.slider_four_in_line').EasySlides({
  2.     'autoplay': true,
  3.     'show': 9
  4. })

5、圆形轮播模式

  1. <div class="slider slider_clock">
  2.     <div>1</div>
  3.     <div>2</div>
  4.     <div>3</div>
  5.     <div>4</div>
  6.     <div>5</div>
  7.     <div>6</div>
  8.     <div>7</div>
  9.     <div>8</div>
  10.     <div>9</div>
  11.     <div class="next_button"></div>
  12.     <div class="prev_button"></div>
  13. </div>
  1. $('.slider_clock').EasySlides({
  2.     'autoplay': true,
  3.     'stepbystep': false,
  4.     'show': 15
  5. })

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

配置参数

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

  1. {
  2.   'autoplay': false,
  3.   'timeout': 3000,
  4.   'show': 5,
  5.   'vertical': false,
  6.   'reverse': false,
  7.   'touchevents': true,
  8.   'delayaftershow': 300,
  9.   'stepbystep': true,
  10.   'startslide': 0,
  11.   'loop': true,
  12.   'distancetochange': 10,
  13.   'beforeshow': function () {},
  14.   'aftershow': function () {},
  15. }

Github地址:https://github.com/IvanShabanov/EasySlides

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!