项目场景：
在实现bxslider时，按照网页上的步骤，发现本地无法实现对应的效果。
资源来源于：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的使用，引用了两个外部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文件夹内 |
最终，呈现能够呈现出正常的结果。
希望本文在记录我遇到的问题的同时，也能够帮助到你。
感谢您的阅读
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
