0

我在 jsfiddle 上有一个代码，它工作正常，但是当我复制所有内容并将其放在记事本上然后在浏览器上运行时，它不起作用

$('.bxslider').bxSlider({
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    infiniteLoop: false,
    nextText: 'Next  -  I am done!',
    prevText: 'I need to go back'
});

这是小提琴

4

4 回答 4

3

您需要将脚本附在$(function(){})其中才能在浏览器中运行

尝试这个：

$(function(){
    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        infiniteLoop: false,
        nextText: 'Next  -  I am done!',
        prevText: 'I need to go back'
    });
});

Fiddle 为您添加$(function(){})或$(document.ready()());包装器。而在浏览器中，我们需要显式添加它，这就是问题所在。

于 2013-06-08T01:59:30.917 回答
1

工作 jsFiddle 演示

尝试将您的<script>标签放在 jQuery 和您的插件之后进行初始化bxSlider，并且等待文档准备好：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
    $(function () {
        $('.bxslider').bxSlider({
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            infiniteLoop: false,
            nextText: 'Next &nbsp;-&nbsp; I am done!',
            prevText: 'I need to go back'
        });
    });
</script>
于 2013-06-08T03:41:54.053 回答
1

jsFiddle 为您附加了 jQuery 库，并将代码包装在 document.ready 事件中 - 请参见左侧的面板。复制代码时，您必须自己执行此操作。

因此，包括 jQuery 库。您可以将脚本放在页面底部（就在结束 BODY 标记之前），而不是使用 document.ready 事件。

注意：$(function(){ 等价于 document.ready。

于 2013-06-08T02:01:32.707 回答
1

您是否在 HTML 文档中引用了 jQuery 库？这需要位于每个包含 jQuery 的页面的顶部。

将它放在<head>文档的标签中（实际上，它可以放在文档中的任何位置，但必须放在 jQuery 代码之前）：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

jQuery 代码既可以存储在外部文件中并像上面的 jQuery 库一样被引用，也可以包含在此文档中的脚本标记之间，如下所示：

<script>
    $(function(){
        $('.bxslider').bxSlider({
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            infiniteLoop: false,
            nextText: 'Next &nbsp;-&nbsp; I am done!',
            prevText: 'I need to go back'
        });
    });
</script>
于 2013-06-08T02:40:45.060 回答