我制作了三张照片的 slider 。我有两个按钮(下一个和上一个)，这部分工作正常。我也想使用 3 个项目符号来选择图像，但在使项目符号按钮与 slider 配合使用时遇到一些问题。我找不到执行此操作的方法。
谁能帮我处理这段代码吗？我是 JavaScript 的真正初学者。
谢谢。
/**
* Navegación por botones
*/
var navegar = function () {
var elemento = document.getElementById('slider').getElementsByTagName('li');
var pos = 0;
for (var i=0; i<elemento.length; i++) {
if (elemento[i].className == "activa") {
elemento[i].className = "noactiva";
pos = i;
}
}
/** Pulsar Anterior **/
if (this.id == "ant" && pos > 0) {
elemento[pos-1].className = "activa";
} else if (this.id == "ant") {
elemento[elemento.length-1].className = "activa";
}
/** Pulsar Siguiente **/
if (this.id == "seg" && pos < elemento.length-1) {
elemento[pos+1].className = "activa";
} else if (this.id == "seg") {
elemento[0].className = "activa";
}
return false;
};
var desplazar = function () {
var nav = document.querySelectorAll(".nav");
for (var i=0; i<nav.length; i++) {
nav[i].onclick = navegar;
}
};
window.onload = function (){
new desplazar();
};body.slide { background-color:#9c9c9c }
#slider {display: block; margin: 0 auto;padding: 0;position: relative;width: 50%;min-height: 22.5em; max-height: 22.5em;list-style: none; overflow: hidden;}
#slider li {position: absolute; background: white; float: left; margin: 0 15px 30px; padding: 10px 10px 35px; box-shadow: 0 4px 6px rgba(0,0,0,.3);}
#slider li img { width: 100%;}
#slider .activa { z-index: 1; opacity: 1;}
#slider .noactiva { z-index: 0; opacity: 0;}
.nav { display: inline-block; margin-top: 1.5em; text-decoration: none;}
.botons { text-align: center;}
.button { position: absolute; top: 50%; }
#linknum ul{list-style:none; display:block; text-align:center; }
#linknum ul li{display:inline; margin-right: 3%;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>PracticaFinal</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
</head>
<ul id="navTop">
<li><a href="index.html">Home</a></li>
<li><a href="slide.html">Slide</a></li>
<li><a href="carta.html">Carta</a></li>
</ul>
<body class="slide">
<div id="slide">
<h1>Galeria d'imatges amb Slide</h1>
<ul id="slider">
<li class="activa"><img src="images/imatge1.jpg" alt="img1" /></li>
<li class="noactiva"><img src="images/imatge2.jpg" alt="img2" /></li>
<li class="noactiva"><img src="images/imatge3.jpg" alt="img3" /></li>
</ul>
<div class="botons">
<button id="ant" class="nav" >Anterior</button>
<button id="seg" class="nav" >Següent</button>
<input id="button-1" type="radio" name="radio-set" class="activa" checked="checked">
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="noactiva">
<label for="button-2" class="button-label-2"></label>
<input id="button-3" type="radio" name="radio-set" class="noactiva">
<label for="button-3" class="button-label-3"></label>
</div>
</div>
</div>
</body>最佳答案
我认为，如果将应用程序状态与表示分开，您会发现您的应用程序更容易思考。 “应用程序状态”是指应用程序中随时间变化的数据。在此示例中，应用程序状态只有一个属性:当前事件的幻灯片索引。
为了让我们的代码了解当前的应用程序状态，它必须使用 DOM找出当前事件幻灯片的索引。我们可以通过创建一个全局变量来保存事件幻灯片索引，将状态移动到代码级别:
var activeIndex = 0;
当我们创建全局变量时，让我们缓存一些对我们将持续使用的 DOM 元素的引用，这样我们就不必不断获取和重新获取它们:
var $bullets = document.querySelectorAll('input[name="radio-set"]');
var $slides = document.getElementById('slider').getElementsByTagName('li');
接下来，让我们更新 navegar 函数以使用 activeIndex 变量:
var navegar = function () {
activeIndex += this.id === 'seg' ? 1 : -1;
if (activeIndex >= $slides.length) {
activeIndex = 0;
}
else if (activeIndex < 0) {
activeIndex = $slides.length - 1;
}
render(); // TODO: We will define this later.
}
我们现在将定义 render 函数，其作用是使用当前应用程序状态更新页面:
var render = function () {
for (var i = 0; i < $slides.length; i++) {
$bullets[i].className = i === activeIndex ? 'activa' : 'noactiva';
$slides[i].className = i === activeIndex ? 'activa' : 'noactiva';
}
};
我们现在已准备好解决您最初的问题并将单选按钮绑定(bind)到我们的 slider 导航。我们需要做的就是将一个 onchange 处理程序附加到每个项目符号，该处理程序将更新 ativeIndex，然后调用 render。我们可以通过向 desplaza 函数添加如下内容来实现此目的:
for (var i = 0; i < $bullets.length; i++) {
(function (index) {
$bullets[index].onchange = function () {
activeIndex = index;
render();
};
})(i);
}
(function (index) {/*...*/})(i); 位可能看起来有点奇怪。如果你好奇的话可以找讨论here .
此外，我还创建了一个fiddle供您引用。
关于javascript - 带子弹的 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47954165/