jQuery-焦点图练习

最新推荐文章于 2024-11-22 09:28:41 发布

原创最新推荐文章于 2024-11-22 09:28:41 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #js #css

js 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点图练习</title>
		<style type="text/css">
			/* 书写css样式 */
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 880px;
				height: 340px;
				margin: 50px auto;
				border: 1px solid #000000;
				position: relative;
			}
			
			.nav{
				margin-top: 300px;
				position: absolute;
			}
			.nav>li{
				width: 20px;
				height: 20px;
				background: orange;
				margin-left: 5px;
				text-align: center;
				list-style: none;
				float:left;
			}
			.content>li{
				list-style: none;
				display: none;
			}
			.content>li>img{
				width: 880px;
				height: 340px;
			}
			.content>.show{
				display: block;
			}
			.nav>.current{
				background: #ccc;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
		<script type="text/javascript">
			//书写jQuery代码
			$(function(){
				$(".nav>li").mouseenter(function(){
					$(this).addClass("current");
					$(this).siblings().removeClass("current");
					var index=$(this).index();
					var $li=$(".content>li").eq(index);
					$li.siblings().removeClass("show");
					$li.addClass("show");
				})
			})
		</script>
	</head>
	<body>
		<div class="box">
			<ul class="nav">
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
			<ul class="content">
				<li class="show"><img src="img/掌柜的.jpg" ></li>
				<li><img src="./img/老白.jpg" ></li>
				<li><img src="img/秀才.jpg" ></li>
				<li><img src="img/小郭.jpg" ></li>
				<li><img src="img/大嘴.jpg" ></li>
				<li><img src="img/无双.jpg" ></li>
				<li><img src="./img/小六儿.jpg" ></li>
				<li><img src="img/小贝.jpg" ></li>
			</ul>
		</div>
	</body>
</html>