滑子用子弹

问题描述 投票:0回答:1

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

任何人都可以帮我这个代码吗?我是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>
javascript slider
1个回答
1
投票

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

为了让我们的代码知道当前的应用程序状态,它必须使用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供您参考。

© www.soinside.com 2019 - 2024. All rights reserved.