Question

我的幻灯片有问题。我正在使用w3.js中的javascript，并且很好奇要添加到代码中，以停止按钮在最后一张和第一张幻灯片上的工作。我在那里找了很多例子，但没有一个对我有用。

JS

w3.slideshow = function (sel, ms, func) {
    var i, ss, x = w3.getElements(sel),
        l = x.length;
    infinite: false;
    ss = {};
    ss.current = 1;
    ss.x = x;
    ss.ondisplaychange = func;
    if (!isNaN(ms) || ms == 0) {
        ss.milliseconds = ms;
    } else {
        ss.milliseconds = 1000;
    }
    ss.start = function () {
        ss.display(ss.current)
        if (ss.ondisplaychange) {
            ss.ondisplaychange();
        }
        if (ss.milliseconds > 0) {
            window.clearTimeout(ss.timeout);
            ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
        }
    };
    var clicks = 1;
    ss.next = function () {
        infinite: false;
        ss.current += 1;
        if (ss.current > ss.x.length) {
            ss.current = 1;
        }
        ss.start();
    };
    ss.previous = function () {
        infinite: false;
        ss.current -= 1;
        if (ss.current < 1) {
            ss.current = ss.x.length;
        }
        ss.start();
    };
    ss.display = function (n) {
        w3.styleElements(ss.x, "display", "none");
        w3.styleElement(ss.x[n - 1], "display", "block");
    }
    ss.start();
    return ss;
};

HTML

<div class="note">
    <h1>4Nadpis elearningu</h1>
    <p>4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ut sem at lobortis. Integer mattis venenatis enim eget semper. Integer finibus, augue a venenatis consequat, odio purus porta odio, in lobortis velit libero eget nunc. Nunc purus nisi, mollis ac facilisis sed, varius ut ipsum. Donec elementum sagittis elit, quis pellentesque risus lobortis vel. In et erat consequat, vestibulum felis et, luctus urna. Aliquam ipsum elit, varius fermentum rutrum eget, lobortis non purus. Nulla id nunc viverra nisi porttitor fermentum ut eu diam. In at vestibulum quam. Aenean non eros erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare convallis lacus, vel dictum nibh convallis sed. Phasellus sem arcu, posuere id blandit ac, placerat dignissim erat. In congue lorem id vestibulum consequat. Proin feugiat ligula nec velit viverra commodo. Donec vitae maximus felis.</p>
</div>
<div class="note">
    <h1>5Nadpis elearningu</h1>
    <p>5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ut sem at lobortis. Integer mattis venenatis enim eget semper. Integer finibus, augue a venenatis consequat, odio purus porta odio, in lobortis velit libero eget nunc. Nunc purus nisi, mollis ac facilisis sed, varius ut ipsum. Donec elementum sagittis elit, quis pellentesque risus lobortis vel. In et erat consequat, vestibulum felis et, luctus urna. Aliquam ipsum elit, varius fermentum rutrum eget, lobortis non purus. Nulla id nunc viverra nisi porttitor fermentum ut eu diam. In at vestibulum quam. Aenean non eros erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare convallis lacus, vel dictum nibh convallis sed. Phasellus sem arcu, posuere id blandit ac, placerat dignissim erat. In congue lorem id vestibulum consequat. Proin feugiat ligula nec velit viverra commodo. Donec vitae maximus felis.</p>
</div>
<br>
<button class="button" onclick="myShow.previous()">Naspat</button>
<button class="button" onclick="myShow.next()">Dalej</button>

<script>
    myShow = w3.slideshow(".note", 0);
</script>

应该停止在最后一张幻灯片上工作（“下一个”按钮），并且也停止在第一张幻灯片上工作（“上一个”按钮）。

Answer 1

以下功能确定如果单击下一步将发生什么情况

  ss.next = function() {
    infinite: false;
    ss.current += 1;
    if (ss.current > ss.x.length) {ss.current = 1;}
    ss.start();
   };

可变电流跟踪当前幻灯片。在这里，它会增加1，如果大于图片数量- x.length -它会重置为1。

不是自动递增，而是检查它是否是最后一个元素并停止递增

  ss.next = function() {
    infinite: false;
    if (ss.current + 1 <= ss.x.length) {ss.current += 1;}
    ss.start();
   };

与上一个功能类似。检查减1是否会导致数字大于0，并且是否是这种情况。

  ss.previous = function() {
    infinite: false;
    if (ss.current-1 > 0) {ss.current -= 1;}
    ss.start();
  };

分别到达最后一张和第一张幻灯片后，如何使“下一个”按钮和“上一个”按钮不起作用？

1 个答案: