Javascript 为什么'；没有一个基于JQuery的内容滑块适合我吗？（bxSlider，js中的逗号）

很长一段时间以来，我一直在尝试在我的网站上加入一个基于JQuery的内容滑块，但我没有一个能够正常工作。以下是网页php中的相关代码：

<ul class="bxSlider">
        <?php
            $poemquery = mysql_query("SELECT * FROM Act1Poems ORDER BY id asc") or die(mysql_error());
            $currentElement = 0;
            $totalElements = 0;
            while($poem = mysql_fetch_array($poemquery)) {
                echo '<li class="poem">';
                echo $poem['Poem'];
                echo '</li>';

                $totalElements++;
            }
            $currentElement = $poem['ID'];

        ?>
        </ul>

这没关系，只是这不允许我自定义滑块（以及它一开始就不起作用）。即使是lightSlider也需要同样的东西：

var slider = $('#publicMethods').lightSlider({
    slideMargin:4,
    slideWidth:200,
    loop:false
});

我已经尝试了这两个滑块，包括和不包括他们的css文件

那到底是怎么回事

对不起，我的第一个问题很模糊。我希望它的范围不是很大。这是我的第一个主要网络项目。但是如果有帮助的话，我已经通过pastebin将整个项目sans数据库信息的源代码添加到参考txt中

最终的目标是让它一次只显示一个段落，让用户能够单击按钮或滑动以从表中按顺序阅读每个段落

Pastebin 1（PHP/HTML）：
Pastebin 2（CSS）：

---

Pastebin 3（JS）：

选择器名称中有一个输入错误，html中的类名是class=“bxSlider”（S是caps），但在JS中使用的是$（'.bxSlider'）（S是小的），这就是为什么在JS中没有正确选择元素，并且没有创建滑块的原因

还要注意的是，函数名是bxSlider（）而不是bxSlider（）（再次输入）

更新你的JS小提琴和它的工作现在

对于css部分，它不起作用，因为Bxslider在

上添加了

样式“float:left”

，所以ul的高度变为零。给出

的背景知识，它就会起作用

---

更新的JS fiddle演示：

我觉得实际的问题是JS语法问题，有一些尾随/游离的逗号。如果你能用完整的JS代码创建JS提琴示例，你可以硬编码

。我只想看看你的完整JS代码？你试过JS lint你的JS文件吗？首先，将您的代码放在这里检查是否存在一些语法问题，非常感谢Scimonester为方便起见内联了images/pastebin，并感谢sanjeev的建议。完整的js代码现在链接到问题中，因此您可以使用它。下面是我通过JSFIDLE复制的尝试：我可能做得不对，但到目前为止运气不佳。另一方面，jslint告诉我，我的javascript文件有上千个问题！！我不知道这段时间我一直在格式化错误的东西。JSFIDLE上的JSHint至少说我输入的内容是好的。我不敢相信我在我的项目和JSFIDLE中都犯了那个愚蠢的错误。但是，在html和css文件中修复后，我没有滑块，在项目本身中，它从我的列表中删除css格式，即使名称匹配？真头痛。滑块在这个JSFIDLE演示中工作，您刚才给出的JSFIDLE函数名为.bxslider（{}），它应该是bxslider（{}）；对于css，它不起作用，因为Bxslider在

上添加样式“float:left”，所以ul的高度变为零，在

上给出背景，它就会起作用。更新JS小提琴哇，我把整个东西都倒过来了。谢谢你，桑杰夫，你是个英雄。一旦我找到了第一张参考图片中的正确格式，我将开始生活。如果我的解决方案解决了您的问题，请标记它是否已回答。

var slider = $('#publicMethods').lightSlider({
    slideMargin:4,
    slideWidth:200,
    loop:false
});

$('.bxSlider').bxSlider({
    adaptiveHeight: true,
    minSlides: 1,
    maxSlides: 1,
    slideWidth: 100
});