slidesjs 幻灯片配置
in 前端 with 0 comment

slidesjs 幻灯片配置

in 前端 with 0 comment

今天用ajax模拟了模板载入,然后准备正式开工组件了。

第一个加入的就是轮播图了,本来考虑用js写的轮播图,结果js案例少且卡了半天之后发现了一个重要的问题。。。

ajax获取的html中的js代码是不解释执行的。。。= =瞬间心凉。

晚上决定还是引用jq吧,jq的轮播图插件很多,找了一个看的舒服的slidesjs

我在网站看到的封面是这样的

2012121721392772.jpg

结果之后看到的demo居然是这样的。。

QQ截图20160927214448.png

哦席八,too young too simple啊= =。

然后放到项目里各种想去掉下面那个control,改了css display:none,居然暂停键还在,加了!important轮播图就直接消失了。。。

后来去查配置资料。。。基本上都是copy来copy去的那种。。

最后在翻了好多个网站之后,终于去掉了下面的control

QQ截图20160927214804.png

下面分享下配置的方法

$('#slides').slidesjs({
    start:1//第几张图片为首页
    width: 414,//宽度
    height: 196,//高度
    play: {
        active: false,//是否显示暂停 运行
        auto: true,//自动播放
        interval: 2000,//毫秒数 1秒=1000
        swap: true//显示 隐藏停止和播放按钮
        
    },
    pagination: false,//隐藏小圆点
});

这里是我把control隐藏掉使用的配置代码

下面分享其他的配置方法

前后按钮设置

$(function(){
  $("#slides").slidesjs({
    navigation: {
      active: true,
        // [boolean] 生成下一个和以前的按钮。
        // 可以设置为false,并使用自己的按钮。
        // 用户定义的按钮,必须具备以下条件:
        // 上一个按钮:class="slidesjs-previous slidesjs-navigation"
        // 下一个按钮:class="slidesjs-next slidesjs-navigation"
      effect: "slide"
        //可以是 "slide" 或者 "fade".
   }
  });
});

分页设置。

$(function(){
  $("#slides").slidesjs({
    pagination: {
      active: true,
        // [boolean] 创建分页项
        // 不能使用自己的分页
      effect: "slide"
        // [string] 可以是 "slide" 或者 "fade".
    }
  });
});

播放和停止按钮设置。

$(function(){
    $("#slides").slidesjs({
        play: {
          active: true,
          // [boolean] 生成的播放和停止按钮.
          //不能使用自己的按键。
          effect: "slide",
          // [string] 可以是 "slide" 或者 "fade".
          interval: 5000,
          // [number] 每张幻灯片上花费的时间以毫秒为单位。
          auto: false,
            // [boolean] 加载开始播放幻灯片。
          swap: true,
            // [boolean] 显示/隐藏停止和播放按钮
          pauseOnHover: false,
            // [boolean] 鼠标经过暂停正在播放的幻灯片。
          restartDelay: 2500
            // [number] 重新启动延迟无效幻灯片。
        }
    });
});

效果设置。

$(function(){
    $("#slides").slidesjs({
        effect: {
          slide: {
            // 滑动效果设置.
          speed: 200
              // [number] 速度以毫秒为单位的幻灯片动画。
          },
      fade: {
            speed: 300,
              // [number] 速度以毫秒为单位的幻灯片动画。
            crossfade: true
              // [boolean] 交叉过度效果.
          }
      }
   });
});

回调函数的使用

$(function(){
  $("#slides").slidesjs({
    callback: {
      loaded: function(number) {
        //第一次加载幻灯片时

        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log .slidesjs-slide-number').text(number);
  },
      start: function(number) {
        //幻灯片开始切换时

        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
  },
  complete: function(number) {
        //幻灯片切换完成时

        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      }
    }
  });
});
Comments are closed.