当前位置：文江博客资源分享详情

SlidesJS 响应式 jQuery 幻灯片插件

发布于 2017-06-28 10:49:55 字数 5977 浏览 2368 评论 6

SlidesJS 是一款老牌的 jQuery 幻灯片插件，经过多年的发展，已经成为一款功能齐全，设计精巧的幻灯片插件。支持循环、自动播放功能和淡入淡出过渡效果，并且能够自动生成分页，可以帮助开发者制作出优雅的幻灯片效果。

插件优势

响应

动态创建幻灯片，适应任何屏幕。

CSS3转换

现代设备，运行于动画。

触摸

刷卡支持跟踪触摸运动的支持的设备。

易于安装

要快速和易于使用的例子。

在线例子

这些例子也包括在下载的文档中。

使用方法

引入插件文件

<script src="js/jquery.min.js"></script>
<script src="js/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>

基本的CSS代码

.slides_container {
    width:470px;
    height:170px;
}
.slides_container div {
    width:470px;
    height:170px;
    display:block;
}

调用插件

$(function() {
  $('#slides').slidesjs({
    width: 940,
    height: 350,
    navigation: false
  });
});

初始化的时候可以有很多个自定义参数，见下面介绍的可选参数部分，注意幻灯片的高度和宽度是必须的。

可选参数

width (number) & height (number)

Set width and height of the slideshow. Hide example

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

This must be defined.

start (number)

Set the first slide in the slideshow. Hide example

$(function(){
  $("#slides").slidesjs({
    start: 3
  });
});

Default value is 1.

navigation (object)

Next and previous button settings. Hide example

$(function(){
  $("#slides").slidesjs({
    navigation: {
      active: true,
        // [boolean] Generates next and previous buttons.
        // You can set to false and use your own buttons.
        // User defined buttons must have the following:
        // previous button: class="slidesjs-previous slidesjs-navigation"
        // next button: class="slidesjs-next slidesjs-navigation"
      effect: "slide"
        // [string] Can be either "slide" or "fade".
    }
  });
});

pagination (object)

Pagination settings Hide example

$(function(){
  $("#slides").slidesjs({
    pagination: {
      active: true,
        // [boolean] Create pagination items.
        // You cannot use your own pagination. Sorry.
      effect: "slide"
        // [string] Can be either "slide" or "fade".
    }
  });
});

play (object)

Play and stop button setting. Hide example

$(function(){
  $("#slides").slidesjs({
    play: {
      active: true,
        // [boolean] Generate the play and stop buttons.
        // You cannot use your own buttons. Sorry.
      effect: "slide",
        // [string] Can be either "slide" or "fade".
      interval: 5000,
        // [number] Time spent on each slide in milliseconds.
      auto: false,
        // [boolean] Start playing the slideshow on load.
      swap: true,
        // [boolean] show/hide stop and play buttons
      pauseOnHover: false,
        // [boolean] pause a playing slideshow on hover
      restartDelay: 2500
        // [number] restart delay on inactive slideshow
    }
  });
});

effect (object)

Effects setting. Hide example

$(function(){
  $("#slides").slidesjs({
    effect: {
      slide: {
        // Slide effect settings.
        speed: 200
          // [number] Speed in milliseconds of the slide animation.
      },
      fade: {
        speed: 300,
          // [number] Speed in milliseconds of the fade animation.
        crossfade: true
          // [boolean] Cross-fade the transition.
      }
    }
  });
});

callback (function)

SlidesJS callbacks. Hide example

$(function(){
  $("#slides").slidesjs({
    callback: {
      loaded: function(number) {
        // Do something awesome!
        // Passes start slide number
      },
      start: function(number) {
        // Do something awesome!
        // Passes slide number at start of animation
      },
      complete: function(number) {
        // Do something awesome!
        // Passes slide number at end of animation
      }
    }
  });
});