Question

我正在尝试构建此图像滑块并在我的计算机上运行它： http://jsfiddle.net/sachin377/2patspw2/

页面未呈现应有的呈现。另外，使用IE时，我还会收到ActiveX警告消息。请看这张图片：

https://i.imgur.com/l1agS2y.png

我在做什么错？这是HTML和CSS：

Slider.html

<!DOCTYPE html>
<html>
  <head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">
        $(&#39;#lightSlider&#39;).lightSlider({
                gallery: true,
                item: 1,
                loop: true,
                slideMargin: 0,
                thumbItem: 9
        });

    </script>
  </head>

  <body>  
    <div>
      <div class="demo">
        <ul id="lightSlider">
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

css / style.css

.demo {
    width:420px;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

Answer 1

您需要向脚本添加lightslider库： CSS：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">

和js：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

此外，在您的代码中对此进行编辑：

$(&#39;#lightSlider&#39;).lightSlider({

与此：

$('#lightSlider').lightSlider({

这是所有已编辑的代码：

<!DOCTYPE html>
<html>
  <head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">

  </head>

  <body>  
    <div>
      <div class="demo">
        <ul id="lightSlider">
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
          </li>
        </ul>
      </div>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
    <script type="text/javascript">
        $('#lightSlider').lightSlider({
                gallery: true,
                item: 1,
                loop: true,
                slideMargin: 0,
                thumbItem: 9
        });

    </script>

  </body>
</html>

Answer 2

如果直接从文件系统打开html文件，则脚本将无法运行。这是一个安全问题。

您需要在计算机上本地运行网络服务器来提供文件。

签出Mongoose。这是用于Windows的简单服务器。这是一篇博客文章，可帮助您入门：https://eureka.ykyuen.info/2013/07/26/mongoose-simple-web-server/

Answer 3

除了添加缺少的资源外，您还需要指定在documnet准备就绪时运行的脚本。（https://learn.jquery.com/using-jquery-core/document-ready/）

.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      slideMargin: 0,
      thumbItem: 9
    });
  });
</script>


<div>
  <div class="demo">
    <ul id="lightSlider">
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
      </li>
    </ul>
  </div>
</div>

HTML在Fiddle中起作用，但在本地不起作用

3 个答案: