个人中心
gpt4 book ai didi

javascript - 带子弹的 slider

转载 作者：行者123 更新时间：2023-12-03 02:49:28 25 4
gpt4 key购买 nike

我制作了三张照片的 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/

25 4 0
文章推荐： javascript - Aurelia BindingEngine propertyObserver 不触发
文章推荐： javascript - 如何使用 javascript 或 jquery 将焦点设置在第一个 LI 上？
文章推荐： javascript - 如何将 AngularJS UI 组件库移植到最新的 Angular？
文章推荐： javascript - 在 URL 浏览器字段中输入子 URL 时不显示路由
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com