Question

尝试运行Flexslider 2，它只显示图片列表。无法弄清楚出了什么问题...... 谷歌仍在积极主持jQuery脚本吗？有人发现任何错误？

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Simpson Strong-Tie</title>
  <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

</head>

<body>
  <section>
    <div class="flexslider">
      <ul class="slides">
        <li>
          <img src="images/Architectural Products Group SubCat Image.jpg">
        </li>
        <li>
          <img src="images/Mudsupply Splash.png">
        </li>
        <li>
          <img src="images/Quik Drive.jpg">
        </li>
      </ul>
    </div>
  </section>
  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')
  </script>

  <!-- FlexSlider -->
  <script defer src="js/jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(function() {
      SyntaxHighlighter.all();
    });
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider) {
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>

</html>

＆＃13;

任何帮助都会一如既往地受到赞赏！

Answer 1

问题不在于flexslider。问题是syntaxhighliter未正确包含。</ p>

只需从代码中删除这些行，然后就可以开始工作了。

$(function() {
  SyntaxHighlighter.all();
});

如果您想在页面上包含SyntaxHighlighter，则需要遵循以下基本步骤： -

要让SyntaxHighlighter在您的页面上工作，您需要执行以下操作：

1）将基本文件添加到您的页面：shCore.js和shCore.css

2）添加所需的画笔（例如，用于JavaScript的shBrushJScript.js，查看所有可用画笔的列表）

3）包括shCore.css和shThemeDefault.css

4）使用任一方法或方法创建代码片段（见下文）

5）调用SyntaxHighlighter.all（）JavaScript方法

更多信息请参阅http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

只是在您的页面上添加flexslider的简单示例（这适用于我的示例页面）

以HTML格式包含Div

<div class="flexslider">
      <ul class="slides">
        <li>
          <img src="/Images/Image1.png" />
        </li>
        <li>
          <img src="/Images/Image2.png" />
        </li>
        <li>
          <img src="/Images/Image3.png" />
        </li>
        <li>
          <img src="/Images/Image4.png" />
        </li>
      </ul>
    </div>

包含JS和css文件

<script src="jquery.flexslider.js" type="text/javascript" defer ></script>
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />

Inlcude Jquery

<script type="text/javascript">       
        $(document).ready(function () {
           $(window).load(function () {
              $('.flexslider').flexslider({
                animation: "slide"
              });
           });
        });
  </script>

http://jsfiddle.net/Gajotres/CPpBD/

http://flex.madebymufffin.com/index.html

<强> [编辑]

你必须添加jquery，然后选择＆＃34; onDomready＆＃34;从jsfiddle的下拉列表中，然后你的jsfiddle看起来像工作。见附件截图

enter image description here

使用Flexslider 2

1 个答案: