Question

我正在使用滑块，我想在使用eq（）函数单击相关触发器时将滑块图像添加到“活动”类。我通过触发索引访问图像，但它不起作用，真正的问题是什么？

$(document).ready(function() {
		
		setInterval(function set() {
		var nextItem = $('.item.active').slideDown().removeClass('active').next('.item');
		var nextTrigger = $('.trigger.active').removeClass('active').next('.trigger');
		
		if ((nextItem.length === 0) && (nextTrigger.length === 0)) {
			nextItem = $('.item').first();
			nextTrigger = $('.trigger').first()
		}

		nextItem.slideUp().addClass('active ');
		nextTrigger.addClass('active ');
	}, 5000);

		$(".images li:first").addClass("first");
		$(".images li:last").addClass("last");
		
		$(".next").click(function(e){
			e.preventDefault();
		
			if($(".images").find(".active").hasClass("last")){
				$(".images").find(".active").removeClass("active");
				$(".images li:first").addClass("active");
				$(".triggers").find(".active").removeClass("active");
				$(".triggers li:first").addClass("active");
			} else {
				$(".images").find(".active").removeClass("active").next().addClass("active");
				$('.trigger.active').removeClass('active').next().addClass('active');
			}
			
		});
		
		$(".prev").click(function(e){
			e.preventDefault();
			if($(".images").find(".active").hasClass("first")){
				$(".images").find(".active").removeClass("active");
				$(".images li:last").addClass("active");
				$(".triggers").find(".active").removeClass("active");
				$(".triggers li:last").addClass("active");
			} else {
				$(".images").find(".active").removeClass("active").prev().addClass("active");
				$('.trigger.active').removeClass('active').prev().addClass('active');
			}
			
		});
		
		
		$("ul.triggers li").click(function(e){
			e.preventDefault();
			if ( !$(this).hasClass('active')){
				$('.trigger.active').removeClass('active');
				$(this).addClass('active');
				$(".images").find(".active").removeClass("active");
				$(".images").eq($(this).index()).addClass("active");
			}
		});
		
		
	});

ul.images li img{
		width: 1000px;
		height: 500px;
		margin-left: 105px;
		
	}
	ul.images li {
		list-style: none;
		display: none;
	}
	ul.images li.active{
		display: block;
	}
	.controls{
		margin: 20px 0 0 500px;
	}
	.triggers li{
		list-style: none;
		display: inline;
		margin-left: 10px;
	}
	.triggers{
		display: inline;
		margin-right: 53px;
	}
	.triggers li a{
		text-decoration: none;
		color: black;
	}
	
	ul.triggers li.active {background-color:gray; color:white; width: 20px; height: 10px;}

<!DOCTYPE html>
	<html>
		<head>
			<script src="jquery/jquery.js" type="text/javascript"></script>
			<script src="jquery/slider.js" type="text/javascript" /></script>
			<link href="css/slider.css" type="text/css" rel="stylesheet">
		</head>
		<body>
			<div id="container">
						<ul class="images">
							<li class="item active"> <img src="images/1.jpg"> </li>
							<li class="item">  <img src="images/2.jpg"></li>
							<li class="item">  <img src="images/3.jpg"> </li>
							<li class="item">  <img src="images/4.jpg"> </li>
						</ul>	
				<div class="controls">
					<a href="" class="prev"> <img src="images/prev.png" width="30px" > </a>
					<ul class="triggers">
						<li class="trigger active"> <a href=""> 1 </a> </li>
						<li class="trigger"> <a href=""> 2 </a> </li>
						<li class="trigger"> <a href=""> 3 </a> </li>
						<li class="trigger"> <a href=""> 4 </a> </li>
					</ul>
					<a href="#" class="next"> <img src="images/next.png" width="30px" > </a>
				</div>
			</div>
		</body>
	</html>

Answer 1

嗯......从外观来看，你在.images上使用了eq但是图像类中只有一个元素？可能可以尝试改变

$(".images").eq($(this).index()).addClass("active");

到

$(".item").eq($(this).index()).addClass("active");

修改你可能想看看这个吗？ https://api.jquery.com/eq/

单击相关触发器时显示滑块的内容

1 个答案: