Question

我有超过10年的PHP编程专业经验。但是没有jQuery和bxSlider等视觉效果的经验。我想尝试这种效果，所以我在Amazon AWS EC2标准Linux服务器+ LAMP上做了以下操作：

我创建了一个新文件夹/ var / www / html / test /（当默认的HTML根目录是/ var / www / html时）。下面的所有其他内容都在/ var / www / html / test /：

中完成

我创建了一个子文件夹图片，带有一些示例图片：

pics/pic1.jpg
pics/pic2.jpg
pics/pic3.jpg
pics/pic4.jpg

然后我创建了这个index.php：

<?php
echo '<html>
<head>
</head>
<body>
<ul class="bxslider">
<li><img src="pics/pic1.jpg" /></li>
<li><img src="pics/pic2.jpg" /></li>
<li><img src="pics/pic3.jpg" /></li>
<li><img src="pics/pic4.jpg" /></li>
</ul>
</body>
</html>';
?>

使用浏览器进行测试时，我会看到四张样本图片，并附有无序列表的子弹。

然后我尝试安装bxSlider，并在其网站首页bxslider.com上找到“说明”。

第1步：链接所需文件

我被指示“从此站点下载程序包”，然后使用此代码链接这些内容：

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

这些以“/”开头的链接看起来与我的设置不兼容（我的测试文件夹是默认文档根目录的子文件夹），所以我删除了斜杠，并将此代码添加到索引的HEAD标记内.PHP：

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />

此时我测试了我的页面，它看起来像前面那样。至少没有任何东西被打破，所以我们继续。

我检查了bxSlider zip文件，点击其首页右上角的下载链接即可获得该文件。其文件夹结构与给定的说明不匹配。我预见到酝酿中的麻烦，我会遇到麻烦。 zip文件包含以下文件和文件夹：

images/bx_loader.gif
images/controls.png
plugins/jquery.easing.1.3.js
plugins/jquery.fitvids.js
bower.json
jquery.bxslider.css
jquery.bxslider.js
jquery.bxslider.min.js
readme.md

但上面指示的链接，我只是通过在开始时删除斜杠来修改，假定jquery.bxslider.css位于文件夹lib下，而jquery.bxslider.min.js应该位于文件夹js下。 Ouuukay，然后剩下的东西呢？我看看我的水晶球，交叉我的手指，并将文件保存在我的服务器上的这些子文件夹中（在/ var / www / html / test /中）：

images/bx_loader.gif
images/controls.png
js/bower.json
js/jquery.bxslider.js
js/jquery.bxslider.min.js
js/readme.md
lib/jquery.bxslider.css
plugins/jquery.easing.1.3.js
plugins/jquery.fitvids.js

为了使成功几率增加一倍，我还会在不同的路径下创建这些副本：

js/plugins/jquery.easing.1.3.js
js/plugins/jquery.fitvids.js

现在我有......咳嗽......设置。看起来令人印象深刻，什么可能出错？所以我转到“指令”的第3步：调用bxSlider。我被指示添加此代码......他们没有提到哪里。嗯，没关系，只需添加它。某处。

$(document).ready(function(){
$('.bxslider').bxSlider();
});

我在UL内容的HTML代码的BODY标签内尝试此代码。结果：HTTP 500错误。

然后我在链接内容的HTML代码的HEAD标签内尝试此代码。结果：HTTP 500错误。

然后我在这段代码周围放置了脚本标签，因为它仍然在HTML代码的head部分内：

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

结果：HTTP 500错误。

然后我在HTML内容的HTML代码的BODY标签内移动上面的代码。结果：HTTP 500错误。

感谢您的指示，伙计们。现在，有人可以给出实际的指示，怎么做？

Answer 1

问题解决了。

我找到了这个视频教程，它恰好包含左侧的完整文件夹树。从那里可以看出插件文件夹和其他东西根本不需要 - 它们不包含在本教程使用的设置中。（我仍然不知道他们应该在哪个文件夹中，但没关系，如果我现在不需要它们。）

https://www.youtube.com/watch?v=l06E0Ia7I0I

我将我的设置演变为与视频中显示的设置相同，但我仍然遇到HTTP 500错误。但是等等，我的东西是在PHP文件中，而不是在普通的HTML文件中，所以我通过制作HTML文件来完善设置的相同性。现在滑块按预期运行。

HTTP 500错误的原因是此代码行上未转义的引号：

$（＆＃39; .slider＆＃39;）bxSlider（）;

我仍然认为更详细的说明和相同设置的可下载演示本来不错。

编辑添加：

进一步测试显示，此设置中包含的两个图像确实是必需的，bxSlider将它们用作箭头，例如，如果我们对设置进行此更改：

$(\'.slider\').bxSlider();

=＆GT;

$(\'.slider\').bxSlider({ mode: \'fade\', captions: true });

使用此设置，其他所有功能都正常，但箭头丢失了。我知道在哪里点击，箭头应该在哪里，但箭头不在那里。

我将两个图像文件复制到所有可能的文件夹，直到最后箭头变得可见，当我在这里复制图像时：

lib/images/bx_loader.gif
lib/images/controls.png

因此，即便是YouTube视频制作人也不知道将图像放在哪里，他也猜到了。他猜错了。

Answer 2

使用CDN设置bxSlider有一种更简单的方法。您唯一需要关注的是找到您的图像和HTML（看起来您已经拥有它了。）通过使用像jsDelivr这样的CDN，脚本，样式表和资产，例如为您提供2个低延迟（快速）。

Options

<强>段

<html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    img {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <ul class="bxslider">
    <li>
      <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" title="This is the Lena test image" />
    </li>
    <li>
      <img src="http://www.ece.rice.edu/~wakin/images/lenaTest3.jpg" title="The captions are entered by using the 'title' attribute on the img element" />
    </li>
    <li>
      <img src="http://image.slidesharecdn.com/random-110813050230-phpapp02/95/phdthesis-dr-shen-furao-30-728.jpg?cb=1313211855" title="This is the 3rd slide." />
    </li>
    <li>
      <img src="http://4.bp.blogspot.com/_6ZIqLRChuQg/TF0-bhL6zoI/AAAAAAAAAoE/56OJXkRAFz4/s1600/lenaOriginal.png" title="This is the 4th slide" />
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    $(function() {
      var bx = $('.bxslider').bxSlider({
        /* Option values are quoted with the exception of numbers, true, and false.*/
        /* Each option ends with a comma (,) with the exception of the last one. */
        mode: 'vertical',
        captions: true,
        auto: true,
        autoHover: true
      });
    });
  </script>
</body>

</html>

如何安装bxSlider

2 个答案: