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

Question

我正在做一个简单的内容滑块，在三张幻灯片中显示客户评论。这是我到目前为止所使用的代码JSFiddle，但是它以某种方式显示了我像3+幻灯片(而不是显示三个div，而是显示了更多“空”的)，所以在第三张幻灯片之后，它应该再次从第一张幻灯片开始。

我遇到的另一个问题是，它似乎在JSfiddle上工作，但是当我将它复制并粘贴到我的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>

有人能帮帮我吗。

Answer 1

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

您的下一个和prev按钮事件处理程序使用一个jQuery动画来移动“slidie”--这很好。然而，您需要添加一些额外的逻辑，以阻止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;
    }
});

我所添加的只是一个名为currentSlide的额外变量，它被初始化为1，这对于您跟踪当前显示给用户的幻灯片是必要的。

然后，在这两个事件处理程序中检查currentSlide是否允许动画发生。只有当当前幻灯片为> 1时，才希望prev按钮工作，也就是说，您不在第一张幻灯片上。同样，如果当前幻灯片为< sliderCount，即不在最后一张幻灯片上，则只希望next按钮工作。

您还必须确保在执行动画之后更改currentSlide，以使其与用户当前看到的内容保持同步。这是用currentSlide -= 1和currentSlide += 1代码行完成的。

要回答您的第二个问题，我想您遇到的问题是，在代码执行之前，jQuery还没有完成加载。首先，我将重新排序HTML中的脚本标记，以便首先加载jQuery：

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

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

$(document).ready(function() {

    // Your code from above goes here

});

它在JSFiddle中工作的原因是因为他们为您做了jQuery，包括将代码放在正确的位置(默认情况下)。您可以在JSFiddle窗口的左边更改它。

作为参考，此解决方案的工作JSFiddle如下：http://jsfiddle.net/EULJd/