JQ的练习

最新推荐文章于 2024-05-14 18:01:48 发布

不拆家的哈士奇

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量114

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/G503503/article/details/130821046

版权

轮播图

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			ul li {
				list-style: none;
			}
			
			#context {
				width: 300px;
				height: 260px;
				margin: auto;
				overflow: hidden;
			}
			
			#left {
				width: 80px;
				float: left;
			}
			
			#right {
				width: 215px;
				float: right;
			}
			
			#left ul li a {
				display: inline-block;
				width: 84px;
				height: 28px;
				color: #8A2BE2;
				background-color: greenyellow;
				text-align: center;
				line-height: 28px;
				font-weight: bold;
			}
			
			#left ul li a:hover {
				background-color: aquamarine;
			}
		</style>
		<script src="../jquery.min.js">
		</script>
		<script type="text/javascript">
			$(function() {
				$("#left>ul>li ").mouseover(function() {
					var index = $(this).index()
					$("#right>ul>li:eq(" + index + ")").fadeIn(1000).siblings().hide()
				});
			});
		</script>
	</head>

	<body>
	</body>
	<div id="context">
		<div id="left">
			<ul>
				<li>
					<a href="#">女靴</a>
				</li>
				<li>
					<a href="#">雪地靴</a>
				</li>
				<li>
					<a href="#">冬裙</a>
				</li>
				<li>
					<a href="#">呢大衣</a>
				</li>
				<li>
					<a href="#">毛衣</a>
				</li>
				<li>
					<a href="#">棉服</a>
				</li>
				<li>
					<a href="#">女裤</a>
				</li>
				<li>
					<a href="#">羽绒服</a>
				</li>
				<li>
					<a href="#">牛仔裤</a>
				</li>
			</ul>
		</div>
		<div id="right">
			<ul>
				<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>
				<li><img src="img/羽绒服.jpg" /></li>
				<li><img src="img/牛仔裤.jpg" /></li>
			</ul>
		</div>
	</div>

</html>

运行结果