javascript - 在我分别到达最后一张和第一张幻灯片后,如何使下一个按钮和上一个按钮不起作用?
问题描述
我的幻灯片有问题。我正在使用 javascript w3.js
,我很好奇要在代码中添加什么,以停止按钮在最后一张和第一张幻灯片上的工作。我在那里寻找了很多例子,但没有一个对我有用。
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>
它应该停止在最后一张幻灯片上工作(下一个按钮),并停止在第一张幻灯片上工作(上一个按钮)。
解决方案
以下函数确定如果单击下一步会发生什么
ss.next = function() {
infinite: false;
ss.current += 1;
if (ss.current > ss.x.length) {ss.current = 1;}
ss.start();
};
变量 current 跟踪当前幻灯片。在这里它会增加 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();
};
推荐阅读
- sparql - SELECT FROM DEFAULT 实际上是做什么的?
- cmake - windows下cmake安装libTorch-cpu运行报错问题
- reactjs - 视频自动播放在移动设备上不起作用(React)
- python - PermissionError:[Errno 13] 权限被拒绝:在我的 VM 重新启动后显示每个文件
- php - 将PHP时间戳转换为设置天数?
- python - 带有矩阵运算的自定义损失函数 keras
- r - 在ggplotly中对齐点组和箱线图
- python - 如何在 python 中使用操作系统打开系统应用程序?
- java - 将徽标从 json 显示到列表视图
- node.js - 如何在与nodejs一起使用时缓存mongodb中的常用数据