Javascript 简单内容滑块工作不正常

我正在制作一个简单的内容滑块，用三张幻灯片显示客户评论。这是我到目前为止的代码，但不知怎么的，它显示了3张以上的幻灯片（而不是显示三个div，它显示了更多的“空”div），所以在第三张幻灯片之后，它应该再次从第一张幻灯片开始

我遇到的另一个问题是，它似乎可以在JSFIDLE上工作，但当我将它复制并粘贴到html中时，它将无法工作

我在html中添加的两行是

<script src="Webdesign/NagelsalonHintham/js/functions.js"></script>
<script src="http://ajax.googleapis.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

---

有人能帮我吗

要回答您的第一个问题，您得到的幻灯片比您想要的多的原因是您需要在JS中更加具体

“下一个”和“上一个”按钮事件处理程序使用jQuery动画移动“slide”div-这很好。但是，如果在该特定方向上没有更多幻灯片可显示，则需要添加一些额外的逻辑，以便停止将div设置为越来越远的动画。我已经修改了您的JS，以实现我认为您想要的：

var sliderWidth = 300;
var slider = $('#slidie');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

var currentSlide = 1;

$('a.prev').click(function () {
    if (currentSlide > 1) {
        $('#slidie').animate({
            left: '+=' + sliderWidth
        }, 500);
        currentSlide -= 1;
    }
});

$('a.next').click(function () {
    if (currentSlide < sliderCount) {
        $('#slidie').animate({
            left: '-=' + sliderWidth
        }, 500);
        currentSlide += 1;
    }
});

此外，出于安全原因，我会将您的代码包装在jQuery DOM就绪事件中。这基本上意味着您编写的代码只有在您的浏览器构建完DOM（允许JS访问HTML页面的框架）后才能执行。因此，如果您引用了任何标记（您确实这么做了），那么在JS运行之前，您就知道这些标记实际上已经存在了。这说明如下：

$(document).ready(function() {

    // Your code from above goes here

});

它在JSFIDLE中工作的原因是，它们为您执行jQuery，包括将代码放在正确的位置（默认情况下）。您可以在JSFIDLE窗口的左侧进行更改

---

作为参考，此解决方案的工作JSFIDLE如下：

感谢您的回复。我已经在您显示的documentready标记之间添加了javascript代码，但是在用html预览主页时它仍然不起作用。我不知道我做错了什么，我发现了！解决方案确实是将代码放在文档就绪标记之间，而我忘了将http://放在jquery链接前面。很高兴听到它能工作，是的-不包括“http://”会给浏览器提供一个不正确的jquery脚本URL。您还可以使用“//ajax.googleapis.com/ajax/jQuery/jQuery-1.10.2.min.js”引用外部脚本，即省略“http:”。这是告诉浏览器“使用当前协议访问此URL”的简写，因此，如果您的站点使用纯HTTP，它将使用“HTTP://”，但如果您的站点使用HTTPS，它将使用“HTTPS://”，这在后一种情况下很有用-它更安全。如果在使用HTTPS服务页面时包含非HTTPS资源，浏览器实际上会抱怨。Ted，我想在我的页面上用其他ID和类再次添加相同的javascript。有没有一种特殊的方法可以做到这一点，因为我已经根据新的div改变了一切，但在打开“预览”时它似乎不起作用。。

$(document).ready(function() {

    // Your code from above goes here

});