jQuery实现滑动轮番图片设置

最新推荐文章于 2022-11-07 21:29:11 发布

想一起听海

最新推荐文章于 2022-11-07 21:29:11 发布

阅读量422

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_68683361/article/details/127275441

版权

给大家分享一下最近作业实现轮番图片设置的效果

这个效果是由背景图片添加列表菜单栏组成，使用了jQuery的层级选择器，鼠标滑动事件和淡入淡出的效果fadein();f方法。我们布局使用div，美化页面需要使用到CSS，最后实现只要滑动左边菜单栏就会图片跟着变换，不滑动则没有任何变化。

如以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">  //CSS美化页面
			*{
				margin: 0px;
				padding: 0px;
			}
			#context {
				width: 300px;
				height: 260px;
				border: 1px pink solid;
				/* 边框线 */
				margin: 10px auto;
				/* 居中 */
				overflow: hidden;
				/* 隐藏图片 */
			}

			#left {
				width: 80px;
				float: left;
				/* 靠左边 */

			}

			#right {
				width: 210px;
				float: right;
				/* 靠右边 */
			}

			#left ul li a {
				display: inline-block;
				/* 设置宽高的内联元素 */
				width: 75px;
				height: 28px;
				text-align: center;
				/* 文字左右居中 */
				line-height: 28px;
				/* 文字上下居中,行高高度一致 */
				border: 1px peachpuff solid;
				font-family: "楷体";
				font-size: 16px;
				/* 字体大小 */
				font-weight: bold;
				/* 字体加粗 */
				color: black;
				border: 1px cadetblue solid;
				border-color: bisque;
				text-decoration: none;
				/* 取消下滑线 */
			}

			#left ul li a:hover {
				background-color: chartreuse;

			}

			ul li {
				list-style: none;
                  //取消li下划线
				margin-bottom: -1px;
				background-color: pink;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//鼠标滑入，显示对应图片
				$("#left>ul li").mouseover(function(){
					// 拿到鼠标滑入项的索引
					var index= $(this).index();
				//根据索引，让li图片显示，其他隐藏
				$("#right>ul li:eq("+index+")").fadeIn().siblings().hide();
				})
			});
		</script>
	</head>
	<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>
	</body>
</html>