Question

我正在使用许多插件学习网页设计。 slippry.js就是其中之一，但我无法确定下面给出的代码有什么问题。页面上我什么也没得到。谢谢

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>

<script>
JQuery(document).ready(function() {
   JQuery('#pictures-demo').slippry({
   slippryWrapper: '<<div class="sy-box pictures-slider"/>',
   adaptiveHeight: false,
   captions: false, 
   pager: false,
   // controls
   controls: false,
   autoHover: false,

   // transitions
      transition: 'kenburns', // fade, horizontal, kenburns, false
      kenZoom: 140,
      speed: 2000 // time the transition takes (ms)
    }); });
</script>

HTML代码（index.html）

<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
    <div class="sy-slides-crop">
        <ul id="pictures-demo">
            <li title="And this is some very long caption for slide 3. Yes, really long.">
                <img src="images/MainBackground.png" alt="demo1_3">
            </li>
            <li title="And this is some very long caption for slide 4.">
                <img src="images/MainBackground2.png" alt="demo1_4">
            </li>
        </ul>
    </div>
</div>

Answer 1

有一些拼写错误，例如“JQuery”（必须是：“jQuery”）或双重＆lt;对于属性slippryWrapper。

更新的代码：

jQuery(document).ready(function () {
  jQuery('#pictures-demo').slippry({
    slippryWrapper: '<div class="sy-box pictures-slider"/>',
    adaptiveHeight: false,
    captions: false,
    pager: false,
    // controls
    controls: false,
    autoHover: false,

    // transitions
    transition: 'kenburns', // fade, horizontal, kenburns, false
    kenZoom: 140,
    speed: 2000 // time the transition takes (ms)
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>

<div class="sy-box pictures-slider">
  <div class="sy-slides-crop">
    <ul id="pictures-demo">
      <li title="And this is some very long caption for slide 3. Yes, really long.">
        <img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
      </li>
      <li title="And this is some very long caption for slide 4.">
        <img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
      </li>
    </ul>
  </div>
</div>

Answer 2

你错了是

的参数

slippryWrapper

hastwo

开始角括号

这里：

<script>
JQuery(document).ready(function() {
   JQuery('#pictures-demo').slippry({
   slippryWrapper: '<div class="sy-box pictures-slider"/>',
   adaptiveHeight: false,
   captions: false, 
   pager: false,
   // controls
   controls: false,
   autoHover: false,

   // transitions
      transition: 'kenburns', // fade, horizontal, kenburns, false
      kenZoom: 140,
      speed: 2000 // time the transition takes (ms)
    }); });
</script>

slippry.js插件无效

2 个答案: