jQuery通过index()方法获取到元素下标，并且接连操作另一个标签中的元素

最新推荐文章于 2022-11-01 18:49:29 发布

杨杨小朋友

最新推荐文章于 2022-11-01 18:49:29 发布

阅读量2.6k

点赞数

分类专栏： jQuery 文章标签： jQuery index() eq() siblings()

本文链接：https://blog.csdn.net/weixin_44887276/article/details/90240667

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//CSS样式
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#father{
				width: 350px;
				height: 200px;
				margin: 0 auto;
				position: relative;
				margin-top: 200px;
			}
			#father ul li img{
				width: 100%;
			}
			#father .img li{
				list-style: none;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
				z-index: 10;
			}
			#father .img li:first-child{
				display: block;
			}
			input{
				border: 0;
				background-color: transparent;
				outline: none;
				color: #FFFFFF;
				font-size: 50px;
				cursor: pointer;
				z-index: 20;
			}
			//能力有限，左右按钮调整图片移动未能实现
			#jian{
				position: absolute;
				left: 10px;
				bottom: 55px;
			}
			#jia{
				position: absolute;
				right: 10px;
				bottom: 55px;
			}
			.number{
				position: absolute;
				right: 0px;
				bottom:5px;
				z-index: 20;
			}
			.number li{
				list-style: none;
				color: red;
				float: left;
				padding-right: 20px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<input type="button" name="" id="jian" value="<" />
			//插入图片
			<ul class="img">``
				<li class="bImg" ><img src="img/1.jpg"/></li>
				<li class="bImg" ><img src="img/2.jpg"/></li>
				<li class="bImg" ><img src="img/3.jpg"/></li>
				<li class="bImg" ><img src="img/4.jpg"/></li>
				<li class="bImg" ><img src="img/5.jpg"/></li>
				<li class="bImg" ><img src="img/6.jpg"/></li>
			</ul>
			//设置和图片对应的数字，点击数字就会对图片进行切换
			<ul class="number">
				<li class="shu">1</li>
				<li class="shu">2</li>
				<li class="shu">3</li>
				<li class="shu">4</li>
				<li class="shu">5</li>
				<li class="shu">6</li>
			</ul>
			<input type="button" name="" id="jia" value=">" />
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.4.0.min.js" ></script>
	<script type="text/javascript">
	//三四行代码就可以搞定，内容如下
	//绑定一个事件
		$(".shu").bind("click",content1=function(){
			//获得点击的元素下标
			var index = $(".shu").index(this);
			//被点击的元素下标对应的图片的下标显示
			$(".bImg").eq(index).fadeIn(500);
			//被点击的元素下标对应的图片的兄弟隐藏
			$(".bImg").eq(index).siblings().fadeOut(500);
		})

下面代码是繁琐的代码，也实现了点一下就可以切换图片，但是比较繁琐
//		$(function(){
			
/*			$(".shu1").click(function(){
				$(".bImg0").fadeIn(500);
				$(".bImg0").siblings().fadeOut(500);
			});
			$(".shu2").click(function(){
				$(".bImg1").fadeIn(500);
				$(".bImg1").siblings().fadeOut(500);
			});
			$(".shu3").click(function(){
				$(".bImg2").fadeIn(500);
				$(".bImg2").siblings().fadeOut(500);
			});
			$(".shu4").click(function(){
				$(".bImg3").fadeIn(500);
				$(".bImg3").siblings().fadeOut(500);
			});
			$(".shu5").click(function(){
				$(".bImg4").fadeIn(500);
				$(".bImg4").siblings().fadeOut(500);
			});
			$(".shu6").click(function(){
				$(".bImg5").fadeIn(500);
				$(".bImg5").siblings().fadeOut(500);
			});*/
			

//		});
	</script>
</html>

杨杨小朋友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery通过index()方法获取到元素下标，并且接连操作另一个标签中的元素

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> //CSS样式 <style type="text/css"> *{ margin: 0; padding: 0; } #fa...
复制链接

扫一扫