Question

我制作了三张照片的滑块。我有两个按钮（下一个和上一个），这部分工作正常。我也想使用3个子弹来选择图像，但是我遇到了一些问题，使子弹按钮与滑块配合使用。我找不到这样做的方法。

任何人都可以帮我这个代码吗？我是一个真正的JavaScript初学者。

感谢。

＆＃13;

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

＆＃13;

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%;}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您将应用程序状态与表示分开，我认为您会发现您的应用程序更容易考虑。通过＆＃34;应用程序状态＆＃34;，我们指的是应用程序中随时间变化的数据。在此示例中，应用程序状态具有单个属性：当前活动的幻灯片索引。

为了让我们的代码知道当前的应用程序状态，它必须使用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';
    }
};

我们现在准备解决您的原始问题并将单选按钮绑定到我们的滑块导航。我们需要做的就是在每个项目符号上附加一个onchange处理程序，用于更新ativeIndex，然后调用render。我们可以通过在desplazar函数中添加以下内容来完成此操作：

for (var i = 0; i < $bullets.length; i++) {
    (function (index) {
        $bullets[index].onchange = function () {
            activeIndex = index;
            render();
        };
    })(i);
}

(function (index) { /*...*/ })(i);位看起来有点奇怪。如果您对此感到好奇，可以进行讨论here。

此外，我已创建fiddle供您参考。

滑子用子弹

1 个答案: