javascript 安装 BxSlider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14275525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Installing BxSlider
提问by Craig Walker
I am a complete beginner to website design and I am trying to create a more modern website for my company. The current one is less than glamorous (Greenlite.co.uk).
我是网站设计的完整初学者，我正在尝试为我的公司创建一个更现代的网站。当前的不那么迷人（Greenlite.co.uk）。
After spending a lot of time trying to make a Flash banner for the homepage it occurred to me that Flash is probably quite outdated and not view able from all platforms. This is when I came across the BxSlider, and it really looks great! If only I could get it to work on my site.
在花了很多时间尝试为主页制作 Flash 横幅后，我突然想到 Flash 可能已经过时并且无法从所有平台查看。这是我遇到 BxSlider 的时候，它看起来真的很棒！如果我能让它在我的网站上工作就好了。
I am using CoffeeCup Visual Site Designer, I then used the 'Add HTML' tool. Into the 'Insert HTML' window I have placed as follows;
我使用的是 CoffeeCup Visual Site Designer，然后我使用了“添加 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>
I have followed, as well as I could, the instructions shown on bxslider.com. I downloaded the package from bxslider, adding the files to coffeecup and linking the location in the script. I also added my images to CoffeeCup and wrote in their location.
我已尽可能遵循 bxslider.com 上显示的说明。我从 bxslider 下载了包，将文件添加到 coffeecup 并链接脚本中的位置。我还将我的图像添加到 CoffeeCup 并写在它们的位置。
When I preview my website I am rewarded with my three images all shown at once, each underneath the other, with a mouse over caption. Alongside the images are a bullet point.
当我预览我的网站时，我会看到我的三个图像同时显示，每个图像都在另一个下面，鼠标悬停在标题上。在图像旁边是一个要点。
What I am trying to achieve is a Bxslider with auto start, displaying stop/start controls and with captions.
我想要实现的是一个带有自动启动、显示停止/启动控件和标题的 Bxslider。
I have attempted many variations, the script I have shown being my original attempt.
我尝试了许多变体，我展示的脚本是我最初的尝试。
The closest I have got to a working Bxslider is by copying code I found from a website for the old version bxslider. This gave me an image slideshow with headers. If I tried to edit the code to my specifications then it would take me back to square one.
我最接近工作的 Bxslider 是复制我从网站上找到的旧版本 bxslider 的代码。这给了我一个带有标题的图像幻灯片。如果我尝试根据我的规范编辑代码，那么它会带我回到第一个。
I am entirely aware that I am likely to be making a very obvious mistake. However, to the untrained eye it's giving me nothing but headaches. Any help would be largely appreciated.
我完全意识到我很可能犯了一个非常明显的错误。然而，对于未经训练的人来说，它只会让我头疼。任何帮助将不胜感激。
回答by christian.thomas
The Javascript you've got is invalid. Try changing the Javascript to:
您获得的 Javascript 无效。尝试将 Javascript 更改为：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
See working jsfiddle - http://jsfiddle.net/FLuRH/
请参阅工作 jsfiddle - http://jsfiddle.net/FLuRH/
回答by David Pilcha
i noticed some thing that might be a problem:
You didn't closed some code part properly
This is yours:
我注意到一些可能有问题的事情：
您没有正确关闭某些代码部分
这是您的：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
This is mine:
这是我的：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'true',
auto: 'true',
autoControls: 'false',
});
});
</script>
Also i put this code part in the "head" section and it worked.
Give it a try.
I hope i helped somehow.
此外，我将此代码部分放在“头部”部分并且它起作用了。试一试。我希望我以某种方式有所帮助。
回答by Raman Singh
Here is working code(just create new html file where u extract bxslider folder)
这是工作代码（只需在您提取 bxslider 文件夹的位置创建新的 html 文件）
<!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>
