SlidesJS 响应式 jQuery 幻灯片插件

发布于 2017-06-28 10:49:55 字数 5977 浏览 2120 评论 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
      }
    }
  });
});

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

Jsmile 站长 回复 甜柠檬 2017-06-30 14:23:19 6 楼

上面的参数里面可以设置滚动效果。

Jsmile 站长 回复 虐人心 2017-06-30 14:22:53 5 楼

上面不是有HTML的结构么,照着那个写就是了

夜无邪 2017-06-28 10:58:57 4 楼

能把左右导航和那个远点放到图片上么,现在的样式有点尴尬啊?

虐人心 2017-06-28 10:58:01 3 楼

用这个插件,我想把取出来的图片显示到这个插件里面,怎么写代码啊?已经困扰我两天了。哪位前辈知道告诉我一下,谢谢!

晚风撩人 2017-06-28 10:56:53 2 楼

如果我要从数据库取出图片加载到里面怎么样操作呢?

甜柠檬 2017-06-28 10:55:18 1 楼

怎么淡入淡出,不喜欢左右滑动的效果,有没有参数可以设置的?

~没有更多了~

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。