分別到達最后一張和第一張幻燈片后，如何使“下一個”按鈕和“上一個”按鈕不起作用？

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();
  };