项目场景：

在实现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文件夹内

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

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

【QS】bxslider没有效果解决方案相关推荐

Cocos Creator 3D后期效果解决方案源码剖析--从入门到融汇贯通
注:本文既有经验上的总结,又有实现方式上的讲解.既有流程上的描述,又有代码细节上的剖析. 全文字数5000+,看的时候最好带上笔和纸. 零.你的序感谢大家的厚爱,KylinsPostEffects上 ...
移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo
移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根 ...
Outlook addon CommandBarButton picture 的不透明效果解决方案
系统中添加了一个menu icon,icon是不规则图形,显示的效果,后面有灰色的背景. 解决方案见ms support, 主要需要添加一个遮罩效果,即CommandBarButton 的Mask属性 ...
iOS UIScrollView 无法滚动没有弹簧效果解决方案
一般情况下,检查如下: 1.没有设置contentSize或者contentSize的尺寸小于等于该scrollView的尺寸 2.scrollView.enable = NO;(仅仅是让scroll ...
Android设置TextView点击时变换颜色（内有无效果解决方案）
设置TextView的点击时变色 1.写好TextView <TextViewandroid:layout_width="wrap_content"android:layou ...
idea安装更新之后打不开的问题解决方案，双击idea快捷方式无效果解决方案
问题描述: 最近在安装MongoDB服务的时候导致强制关闭了正在运行的idea,结果当我再次去打开运行idea的时候就在也打不开了,最后卸载了重新安装idea最新版本,结果还是打不开,最后在网上搜索到 ...
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient
最近用的echarts的柱状图,客户需要有立体的效果,需要echarts的渐变色生成器echarts.graphic.LinearGradient实现,特记录一下解决方法: 效果图如下代码如下(主要 ...
a span等行内元素加margin属性后无效果解决方案
html中经常用margin属性来进行定位的调整,但a,span等行内元素加margin后不发生位移,给这些元素加上display:inline-block后就可解决:而且为行内元素加此属性后既可以像 ...
使用border-color设置输入框边框颜色后颜色不一致（左上边自动深色）解决方案
代码.效果解决方案重新定义一下边框类型即可解决此问题 border: #0000FF solid; | border-style: solid; 代码.效果这样问题就解决了总结这个可能是HT ...

【QS】bxslider没有效果解决方案

项目场景：

问题描述

原因分析：

解决方案：

【QS】bxslider没有效果解决方案相关推荐

最新文章

热门文章