javascript - 如何在 Red Hood 模板中添加自动幻灯片

Question

我已经在我的博客中下载并应用了 red hood 模板(Red Hood)。但是我发现 slider 不会随计时器自动滑动。这是 Red hood slider 代码..

  <!-- slider -->

  <div class='slider-container'>

  <ul id='slider'>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li>
  </ul>

  </div><!-- /slider -->

我刚刚编辑到

在 Head 元素中 - 我添加了 -

  <script>
  jQuery(document).ready(function() {
    jQuery('.fp-slides').cycle({
    fx: 'fade',
    timeout: 4000,
    delay: 0,
    speed: 1000,
    next: '.slidesjs-next',
    prev: '.slidesjs-previous',

    continuous: 0,
    sync: 1,
    pause: 1,
    pauseOnPagerHover: 1,
    cleartype: true,
    cleartypeNoBg: true
});
});
  </script>

并且还将正文中的 slider 代码更改为 -

  <!-- slider -->
  <div class='slider-container'>
  <div class='fp-slides'>
    <ul id='slider'>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li>
  <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li>
    </ul>
  </div>
  </div><!-- /slider -->

但是结果没有变化!如果我错了或者遗漏了自动滑动的东西，请帮助我得到结果。

Answer 1

我查看了给定的 red hood 模板链接，并使用开发人员工具来了解 slider 使用了哪个插件。

请注意，您需要查找应用于 slider HTML 代码的任何 HTML 元素的脚本。事实证明，该模板在代码模式下使用了 boxslider 插件。

这是显示此示例的链接:boxslider ticker mode