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中更具体。

你的下一个和上一个按钮事件处理程序使用jQuery动画来移动'slidie'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;
    }
});

我添加的是一个名为currentSlide的额外变量，它初始化为1.这是您跟踪当前向用户显示哪张幻灯片所必需的。

然后，在两个事件处理程序中，您检查currentSlide是否允许动画发生。如果当前幻灯片为> 1，您只希望prev按钮起作用，即您不在第一张幻灯片上。同样，如果当前幻灯片为< sliderCount，您只希望下一个按钮有效，即您不在最终幻灯片中。

执行动画后，您还必须确保更改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 ready事件中。这基本上意味着您编写的代码仅在DOM（允许JS访问HTML页面的框架）完成由浏览器构建后执行。因此，如果您引用任何标记（您这样做），您就知道标记在JS运行之前实际存在。这说明如下：

$(document).ready(function() {

    // Your code from above goes here

});

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

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

简单内容滑块无法正常工作

1 个答案: