时间戳

首页 > 解决方案 > HTML 在 Fiddle 中有效，但在本地无效

javascript - HTML 在 Fiddle 中有效，但在本地无效

问题描述

我正在尝试构建这个图像滑块并在我的机器上运行它：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%;
}

标签： javascriptjquerycsshtml

解决方案

您需要将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>

推荐阅读