安装BxSlider
我是一个网站设计的完全初学者，我正在努力为我的公司创建一个更现代化的网站。目前的版本并不那么光鲜(Greenlite.co.uk)。
在花了很多时间尝试为主页制作Flash横幅后，我发现Flash可能已经相当过时了，并不是所有平台都可以查看。这就是我偶然发现BxSlider的时候，它看起来真的很棒！如果我能让它在我的网站上工作就好了。
我使用的是CoffeeCup可视化网站设计器，然后我使用了'Add HTML‘工具。放入“插入HTML”窗口，如下所示；
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
<li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>
</ul>
<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>我已经尽可能地遵循了bxslider.com上显示的说明。我从bxslider下载了这个包，将文件添加到coffeecup并链接到脚本中的位置。我还把我的图片添加到了CoffeeCup上，并写上了它们的位置。
当我预览我的网站时，我得到的奖励是我的三张图片同时显示，每张图片都在另一张下面，并将鼠标悬停在标题上。图片旁边是一个要点。
我试图实现的是一个具有自动启动、显示停止/启动控件和标题的Bxslider。
我尝试了许多变体，我所展示的脚本是我最初的尝试。
我得到的最接近工作的bxslider是通过复制我从网站上找到的旧版本Bxslider的代码。这给了我一个带有标题的图像幻灯片。如果我试图按照我的规范编辑代码，那么它会把我带回原点。
我完全意识到我可能会犯一个非常明显的错误。然而，对于没有经过训练的人来说，这只会让我头疼。任何帮助都将在很大程度上受到感谢。
回答 3
Stack Overflow用户
发布于 2013-01-11 17:56:10
你得到的Javascript是无效的。尝试将Javascript更改为：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>请参阅使用jsfiddle - http://jsfiddle.net/FLuRH/
Stack Overflow用户
发布于 2013-09-26 19:48:47
我注意到一些可能有问题的事情：
您没有正确关闭某些代码部分
这是你的：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>这是我的：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'true',
auto: 'true',
autoControls: 'false',
});
});
</script>另外，我把这部分代码放在"head“部分，它起作用了。试试看。我希望我能帮上忙。
Stack Overflow用户
发布于 2015-02-13 20:09:29
这是工作代码(只需创建新的html文件，在其中解压bxslider文件夹)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(".bxslider").bxSlider();
});
</script>
</head>
<body>
<div style="width:700px;height:250px;align:center;padding-left:250px;">
<ul class="bxslider">
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
</ul>
</div>
</body>
</html>https://stackoverflow.com/questions/14275525
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号