javascript - 简单的 javascritp 幻灯片 - 添加控件
问题描述
更新:
我在做简单的歌词幻灯片我使用了一些 js 幻灯片并对其进行了修改。
我的问题是,它可以用更简单的方式完成吗 - 原始代码已经定时自动播放等?/键,左/右键或 pgup/pgdn和鼠标滚轮。
我想要的只是显示/隐藏 div - 从第一个排序 - 列出上一个/下一个 div 上的 onclicks
//slideshow -
//https://www.w3schools.com/howto/howto_js_slideshow.asp
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n) { showSlides(slideIndex += n); }
function currentSlide(n) { showSlides(slideIndex = n); }
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "flex";
dots[slideIndex-1].className += " active";
}
解决方案
推荐阅读
- jquery - datatables.draw() 不绘制表格
- html - 如何使用 Flask 在 href 链接中链接内部 html 文件
- mongodb - MongoDB聚合:如何检查数组中是否存在包含多个属性的对象
- python - 根据第二列的嵌套字典映射列
- javascript - 解析大对象时动画冻结
- reactjs - 为什么上下文项“复制”没有显示在上下文菜单中,如 ag-grid 文档中所述?
- laravel - Pusher 未使用 laravel echo、laravel 和 vue js 聊天应用程序实时更新
- mapbox - Mapbox 根本找不到地址
- c++ - 每 5 秒更改一次圆圈颜色
- html - 绑定 Ngmodel 时,值未显示在 Angular 选择框中