在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

4种类型的jQuery轮播图插件-EasySlides.js

分类:图片切换 更新时间:2018-04-16 浏览次数:370

代码简介

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

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE9+

使用方法

1. 引入文件:

<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>


2. html和js:

    1)大图轮播模式:

<divclass="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>
  <divclass="next_button">NEXT</div> 
  <divclass="prev_button">PREV</div> 
  <divclass="nav_indicators"></div>

  </div>

  代码初始化:

  $('.slider_one_big_picture').EasySlides()


  2)多图轮播模式

<divclass="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>
   <divclass="nav_indicators"></div>

 </div>

 代码初始化:


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

})


  3)封面轮播模式:

<divclass="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>
   <divclass="next_button"></div>
   <divclass="prev_button"></div>

 </div>

代码初始化:

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

})


  4)同时显示4幅图片模式:

<divclass="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>
  <divclass="next_button"></div>
  <divclass="prev_button"></div>

</div>

代码初始化:

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

})


  5)圆形轮播模式:

<divclass="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>
  <divclass="next_button"></div>
  <divclass="prev_button"></div>

</div>

代码初始化:

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

})



问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!