轮播图插件slides.js使用方法及参数

插件应用

浏览数:1,240

2017-6-3

简介

SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘,触摸,css3转换。

使用方法

引入文件

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>

html文件

<div id="slides">
   <img src="http://placehold.it/940x528" /> 
   <img src="http://placehold.it/940x528" /> 
   <img src="http://placehold.it/940x528" /> 
   <img src="http://placehold.it/940x528" /> 
   <img src="http://placehold.it/940x528" />
</div>

API介绍

1.设置轮播的宽高(默认值都为 auto)

$("#slides").slidesjs({
    width: 700,
    height: 393
  });

2.设置从那张开始(默认值为 1)

$("#slides").slidesjs({
    start: 3  //这里注意数值从1开始,不是0;默认值0
  });

3.设置上下切换按钮

可以自定样式:

<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
$("#slides").slidesjs({
 navigation: {
 active: true,  //显示或隐藏前一张后一张切换按钮;默认值为true,
 effect: "slide"  //设置切换的方式,slide:平滑,fade:渐显;默认值slide
 }
});

4.设置分页切换

可以自定样式:

 <ul class="slidesjs-pagination">
  <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li>
  <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li>
  <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li>
  <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li>
</ul>
 $("#slides").slidesjs({
 pagination: {
 active: true,  //显示或隐藏 分页;默认值true
 effect: "slide"  //这里可以设置切换方式,跟上下页切换一样,但是跟上下页不冲突;默认值slide
 }
 });

5.自动播放

可以自定样式:

<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a>
</pre>
<pre class="brush:js">
$("#slides").slidesjs({
 play: {
 active: true,    //开始自动播放功能;默认值true
 effect: "slide",  //切换方式,跟上面两个切换方式不冲突;默认值slide
 interval: 5000,   //在每一个幻灯片上花费的时间;默认值5000
 auto: false,     //开始自动播放;默认值false
 swap: true,      //显示或隐藏 自动播放和停止按钮;默认值true
 pauseOnHover: false,  //鼠标移入是否暂停;默认值false
 restartDelay: 2500  //重启延迟;默认值2500
 }
 });

6.效果配置

$("#slides").slidesjs({
  effect: {
      slide: {
        speed: 200  //切换花费的时间;默认值200
      },
      fade: {
        speed: 300,  //切换花费的时间;默认值300
        crossfade: true  //交叉切换,设置为false,会看到背景色;默认值true
      }
    }
  });

7.回调函数

$("#slides").slidesjs({
    callback: {
      loaded: function(number) {
        // 幻灯片载入完成时
      },
      start: function(number) {
        // 切换开始时
      },
      complete: function(number) {
        // 切换结束时
      }
    }
  });

在线演示及下载

在线演示
本地下载