项目场景：

在实现bxslider时，按照网页上的步骤，发现本地无法实现对应的效果。

问题描述

当我们按照bxslider所提供的安装方法：

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      
      
      $('.slider').bxSlider();
    });
  </script>

</head>
<body>

  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>

</body>
</html>

#引用自bxslider官网：https://bxslider.com/

最终，我们网页并不能呈现出应该有的效果
Bxslider官网介绍图
网页仅是图片平铺，没有图片幻灯片的效果
没有效果

原因分析：

首先考虑代码有没有打错，在仔细检查之后，没有发现问题。
由于bxslider的使用，引用了两个外部js和一个css，因此考虑是不是文件没有引入。
于是，进入我们的网页，点击F12，刷新网页后，查看网络的收发情况。

在这里插入图片描述

我们可以看到，有三个文件并未得到响应。所以，可以知道，文件并未接收到。在仔细考虑之后，发现文件放在了国内无法访问的网页。为了解决这个问题，我们可以修改代码，并将访问目标保存到本地。
在重新检查官网之后，发现官网提供了其他的部署方式，我并没有去尝试，因为我发现有一个方法提供了文件的下载，直接修改本地也就可以解决问题了。

解决方案：

首先，修改本地html的head部分。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

三个部分做如下修改：

    <link rel="stylesheet" href="CSS/jquery.bxslider.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="JS/jquery.bxslider.min.js"></script>

其中，JS是html所在目录下的文件夹，保存了JavaScript文件，CSS是html所在目录下的文件夹，保存了css文件。
这里，我们修改了部分引用本地以及部分引用了jQuery的其他源。
在此之后，我们需要下载bxslider的源文件
链接：下载链接
下载之后，我们会得到一个压缩包，我们需要的文件有以下几个（假设当前的路径为html所在的文件夹）：

压缩包内文件	保存的位置
bxslider-4-4.2.12\dist\images整个文件夹	./CSS文件夹内
bxslider-4-4.2.12\src\css\jquery.bxslider.css	./CSS文件夹内
bxslider-4-4.2.12\dist\jquery.bxslider.min.js	./JS文件夹内

最终，呈现能够呈现出正常的结果。

希望本文在记录我遇到的问题的同时，也能够帮助到你。
感谢您的阅读

【Q&S】bxslider没有效果解决方案

项目场景：

问题描述

原因分析：

解决方案：

猜你喜欢