Question

让bxSlider工作有问题。我错了，我想在最后一步 - 调用bxSlider。一切都是从同一个文件夹链接的。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- 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="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
  jQuery(document).ready(function(){
        jQuery('.bxslider').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
      });
  });    
</script>
</head>

<body>
<ul class="bxslider">
  <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png" /></li>
  <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader2.png" /></li>
</ul>
</body>
</html>

Answer 1

你的小提琴有点混乱，所以我创造了自己的小提琴。这是一个有效的例子：http://jsfiddle.net/jbLm2spv/ 我认为你的代码中的问题是你使用jQuery 1.8.2，这对于bxSlider来说可能太旧了。使用较新的jQuery版本，例如2.1.3。

html标记：

<ul class="bxslider">
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
  <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li>
</ul>

js：

$('.bxslider').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
});

Answer 2

您是否在控制台中看到任何错误？您排队bxslider的方式假设您已下载文件，并且与index.html位于同一目录中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
// This assumes you jquery.bxslider.min.js is in the same folder as the file that loads this page. 
<script src="jquery.bxslider.min.js"></script>

编辑：

好的，听起来你有一些错误需要修复。第一个是jQuery没有被定义。您需要将http添加到jQuery路径的开头，否则它会查看file：//协议，这意味着它在您自己的计算机上本地查找，而不是托管jQuery库的URL。试图加载：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

这应解决您的“$ not not defined”错误。

其次，您需要下载jquery.bxslider.min.js文件，并将其放在适当的目录中。现在的方式是，它与加载页面的文件（例如index.html）位于同一目录中。你可以把它放在那里，或者你可以创建一个新目录（为了更好的组织），并把它放在那里。我建议创建一个名为“js”的文件夹。

要下载它，您只需复制此链接中的文字：

https://raw.githubusercontent.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js

并将其保存到名为jquery.bxslider.min.js的文件中，与index.html在同一级别或js文件夹中，并相应地更新脚本src：

<script src="js/jquery.bxslider.min.js"></script>

Answer 3

您可以使用MixA = userStringA[0:2] + userStringB[2:] #from 2 till end MixB = userStringB[0:2] + userStringA[2:] #from 2 till end。

您的代码存在一些问题。这是工作小提琴： http://jsfiddle.net/fq23j3sr/7/

在你的JS中，你试图初始化jQuery 1.8.3函数， BEFORE 你实际加载了你试图引用的插件。简单地移动：

bxSlider()

下面的插件代码将解决未定义函数错误的问题。

希望这有帮助。

编辑： 自动启动 - 正如评论中所述：

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

Answer 4

有几个问题对你的小提琴的操作至关重要。这是原作的fork。

图像的网址相对而非绝对。网址中也有空格。
- <强> WRONG <删除> ../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png
- <强> CORRECT http://www.example.com/Luke%20Portfolio%202%20-%20rough_idea/factormedia.co.za/images/fader1.png
使用jsFiddle时，您应该使用右侧面板输入外部文件的URL。
- jquery.bxslider.min.js，jquery.bxslider.css应上传到您自己的网站，或者您应使用CDN。然后你需要使用url而不是粘贴编辑面板中的代码。

`

bxslider无法正常工作

4 个答案: