slide.js使用文档

最新推荐文章于 2021-05-05 15:03:15 发布

weixin_30439131

最新推荐文章于 2021-05-05 15:03:15 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heqinglin/p/5378573.html

版权

slide.js使用文档

框架代码

<!doctype html>
<head>
  <style>
    /* Prevents slides from flashing */防止闪烁
    #slides {
      display:none;
    }
  </style>

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

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>
</head>
<body>
  <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>
</body>

基本设置

一、设置宽高（必须定义）

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

此处设置的宽高应该设置成幻灯图片的宽高，保证父元素正好包裹图片。如果全屏幻灯，请将#slides｛width:100%; height:auto;｝

二、设置从哪一张开始显示

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

默认 start:1

三、左右按钮

$(function(){
  $("#slides").slidesjs({
    navigation: {
      active: true,
        // [boolean] Generates next and previous buttons.  生成下一张和上一张按钮。
        // You can set to false and use your own buttons.  可以设置false，使用自己写的按钮来替代系统的按钮。
        // User defined buttons must have the following:
        // previous button: class="slidesjs-previous slidesjs-navigation"  自己写的按钮，上一张按钮的class=“”
        // next button: class="slidesjs-next slidesjs-navigation"  下一张按钮的class=""
      effect: "slide"
        // [string] Can be either "slide" or "fade".  效果滑动，也可以设置成fade幻灯
    }
  });
});

此处可以简写成 navigation: true,

四：分页设置

五：播放和停止按钮设置

$(function(){
  $("#slides").slidesjs({
    play: {
      active: true,
        // [boolean] Generate the play and stop buttons. 生成播放停止按钮，需要定义css，否则看不到按钮的
        // 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. 默认不自动进行播放！十分重要，设置成true。
      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  恢复动画间隔
    }
  });
});

六：效果设置

$(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. 交叉幻灯效果
      }
    }
  });
});

七：回调函数

省略部分不常用，详细见slide.js官方主页 http://slidesjs.com/

最后来一个大综合

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,   
        height: 450,
        navigation: {       //显示上一张下一张
            active: true
        },
        play: {                 设置自动时的动画效果、自动播放、间隔、鼠标悬停、移出恢复时间
            active: false,
            effect: "slide",
            interval: 2000,
            auto:true,
            swap: false,
            pauseOnHover: true,
            restartDelay: 2500,
        },
        effect: {                  //特别注意：动画效果要与上面play中的属性保持一致，否则点击切换图片后，无法恢复动画
            slide:{
            speed:2000,           //动画切换速度
        }}

      });
    });
 </script>

posted on 2016-04-11 15:12 我是青木木阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/heqinglin/p/5378573.html

weixin_30439131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slide.js使用文档

slide.js使用文档框架代码<!doctype html><head> <style> /* Prevents slides from flashing */防止闪烁 #slides { display:none; } </sty...
复制链接

扫一扫