jquery - 单击相关触发器时显示 slider 的内容-6ren

jquery - 单击相关触发器时显示 slider 的内容

转载作者：行者123 更新时间：2023-12-01 04:02:57

25

4

我正在开发一个 slider ，我想在使用 eq() 函数单击相关触发器时向 slider 图像添加“active”类。我通过触发器索引访问图像，但它不起作用，真正的问题是什么？

$(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>

最佳答案

嗯...从外观上看，您在 .images 上使用了 eq，但只有一个具有 images 类的元素？也许可以尝试改变

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

至

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

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

关于jquery - 单击相关触发器时显示 slider 的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36676210/

25

4

0

文章推荐： jquery - 在 Laravel 中从 AJAX 返回数据

文章推荐： jQuery 使用 .on ('click' 独立控制许多重复的 html 元素

文章推荐： php - 如何使用ajax提交表单后重新加载数据表？

文章推荐： jquery - 如果不存在，则将 `http://` 添加到字符串中

MySQL 触发器
概述触发器是 MySQL 的数据库对象之一，不需要程序调用或手工启动，而是由事件来触发、激活，从而实现执行，包括 INSERT 语句、UPDATE 语句和 DELETE 语句创建触发器 1. 创建
WPF 触发器
当我为单元格获得的值是某种类型时，我试图设置一个触发器来显示文本块。我已经成功地设法在相同的情况下显示图像，但在这种情况下我不需要图像，而是一些文本。已注释掉行以进行测试。尝试使其工作。注释掉的代
Phpmyadmin 触发器
我需要在 phpmyadmin 中为 2 个表创建一个触发器。所以有表 stores 和 tbl_storefinder_stores。我想从 stores 表中插入 4 个东西(名称、地址、经度
Mysql高级8-触发器
阅读目录 1、触发器 2、触发器类型 3、触发器语法 4、插入数据触发器案例 5、修改数据触发器案例
17、SQLite 触发器
SQLite 触发器（Trigger） SQLite 的触发器是数据库的回调函数，它会在指定的数据库事件发生时自动执行/调用。以下是关于SQLite的触发器的要点：SQLite **触发器（Trig
SQL Server 触发器
请帮我写一个向表中添加新行的触发器。我的数据库中有 3 个表: 地区(id，名字)； id - 主要；技术人员(身份证、姓名)； id - 主要；可用性(id、区域、技术、计数)； id - p
审计表的 SQL 触发器
我正在编写一个触发器来审核表中的更新和删除。我正在使用 SQL Server 2008 我的问题是，有没有办法在不经过删除和插入表的选择阶段的情况下找出对记录采取的操作？另一个问题是，如果记录被删
Oracle 触发器 - 变异表的问题
我的表: TableA (id number, state number) TableB (id number, tableAId number, state number) TableC (id n
SQL 触发器 - 基础知识帮助
我很少写触发器。我可以帮助设置这件事。 CREATE TRIGGER audit_tableName ON dbo.tableNameAudit AFTER CREATE, UPDATE, DELET
创建自动编号的 Oracle 触发器
我之前从未在 Oracle 中创建过触发器，所以我正在寻找一些方向。如果 ID 不在插入语句中，我想创建一个将 ID 增加 1 的触发器。 ID 应该从 10000 开始，当插入一条记录时，下一个
用于更新摘要计数的 SQLite 触发器
考虑以下两个(假设的)表温度 * day * time * lake_name * station * temperature_f 温度_总结 * day * lake_name * station
SQL 触发器 - 如何获取更新的值？
如何在 SQL 触发器中获取更新记录的值 - 如下所示: CREATE TRIGGER TR_UpdateNew ON Users AFTER UPDATE AS BEGIN S
java - Cassandra 触发器
我是 Cassandra 新手，使用 Cassandra 3.10 并有类似的表格 create table db1.table1 (id text, trip_id text, event_time
截断时的 SQL 触发器
在 MSSQL 中执行 TRUNCATE(而不是删除)时如何触发触发器最佳答案来自msdn : TRUNCATE TABLE cannot activate a trigger because t
显示工资变化的 SQL 触发器
我正在尝试在 sql developer 中创建一个简单的触发器，以在工资发生变化时显示工资的变化 CREATE OR REPLACE TRIGGER salary_changes BEFORE DE
用于维护修改历史记录的 SQL 触发器
我有三个表: Table1: Customers (CustomerId, Name, CustomerAddress) Table2: AccountManagers(ManagerId, Name
Sql 触发器 - 它属于哪个表？
在 Sql Server 2005 触发器中有没有办法在执行期间获取触发器附加到的表的名称和架构？最佳答案 SELECT OBJECT_NAME(parent_id) AS [Table],
MySQL 触发器，模糊的语法错误
使用 MySQL 5.5，以下触发器因错误而被拒绝: create trigger nodups before insert on `category-category` for each row b
jQuery Fancybox 触发器
我使用 fancybox 打开一个带有表单的弹出窗口。目前，当鼠标离开主页时，弹出窗口就会出现。为了完成这项工作，我有一个隐藏的链接标签，我用trigger()函数模拟它，单击该函数，以便该链接的hr
SQL 触发器 - 如何测试操作？
我的触发器触发 INSERT, UPDATE and DELETE .我需要根据触发触发器的操作从适当的内存表( inserted, deleted )插入。由于只有 inserted位于 INSER

首页

博学

6Ren·AI

商城

jquery - 单击相关触发器时显示 slider 的内容