bxslider无法正常工作

在使bxSlider正常工作时遇到问题。我错了我想象的最后一步 - 调用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>

来源

2015-10-19 factordog

您可以使用jQuery 1.8.3。

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

在你的JS，你试图初始化bxSlider()功能，之前你实际加载你试图引用插件。简单移动：

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

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

希望这会有所帮助。

编辑： 自动启动 - 如要求在评论：

$(document).ready(function() { 
    $('.wrapper').bxSlider({ 
     'auto' : true, 
     'autoStart' : true 
    }); 
});

来源

2015-10-19 18:50:48 disinfor

@isherwood是的，它似乎它。我会调整我的答案。 – disinfor

@isherwood初始化脚本实际上在OP原始的小提琴中发生了两次--JS文件的顶部和HTML窗口 - 它不会呈现该JS。 OP也没有在小提琴设置中加载jQuery。 – disinfor

好的。我没有看着小提琴，而是假定发布的代码更准确。 – isherwood

你的小提琴已经有点乱了，所以我创建了自己。这里是一个工作示例：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 
});

来源

2015-10-19 18:26:01 sticksu

会似乎是一个愚蠢的问题。但我在哪里可以找到2.1.3的ajax库的相关链接.....如果网站上的教程肯定会给1.8.2版本，它应该可以工作？ – factordog

当我在我的小提琴上将它改为2.1.3时，它似乎确实有效。问题出现在我不知道如何纠正问题的地方。 – factordog

您可以从这里下载：http：//jquery.com/download/。那么，在我的小提琴中，我用jQuery 2.1.3试了一下，它工作。这里是缩小版本，最新的，2.1.4：http://code.jquery.com/jquery-2.1.4.min.js – sticksu

你看到在控制台的任何错误？您正在排队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>

这应该解决您的“$未定义”错误。

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

下载它，你可以将文本从这个链接复制：

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

，并将其保存到一个名为jquery.bxslider.min.js文件，无论是在同一水平的指标.html或在一个js文件夹中，并相应地更新你的脚本源：

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

来源

2015-10-19 18:27:26

加载资源失败：net :: ERR_FILE_NOT_FOUND jquery.bxslider.min.js：10 Uncaught ReferenceError：jQuery没有定义滑块。html：14 Uncaught ReferenceError：$未定义是3错误 – factordog

有报道说，是你的小提琴的操作根本的几个问题。这是原始的fork。

图片的网址是相对不绝对的。网址中也有空格。
- WRONG ~~../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png~~
- 正确 http://www.example.com/Luke%20Portfolio%202%20-%20rough_idea/factormedia.co.za/images/fader1.png
使用的jsfiddle，你应该使用rightside面板输入网址到外部文件。
- jquery.bxslider.min.js和jquery.bxslider.css应上传到自己的网站，或者你应该使用CDN。然后，您需要使用url而不是在编辑面板中粘贴代码。

来源

2015-10-19 18:54:53 zer00ne

它只是加载一个空白页面 – factordog

@factordog我不好，抱歉，它现在已经修复。 – zer00ne

bxslider无法正常工作

回答

相关问题