javascript - 简单的内容 slider 无法正常工作

Question

我正在制作一个简单的内容 slider ，以在三张幻灯片中显示客户评论。这是我到目前为止的代码 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 就绪事件中。这基本上意味着您编写的代码仅在 DOM(允许 JS 访问 HTML 页面的框架)完成由您的浏览器构建后执行。因此，如果您引用任何标签(您这样做)，您就会知道这些标签在 JS 运行之前确实存在。如下图所示:

$(document).ready(function() {

    // Your code from above goes here

});

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

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