jQuery实现层级轮播图

最新推荐文章于 2021-06-07 09:07:05 发布

敲出真谛

最新推荐文章于 2021-06-07 09:07:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签：层级轮播图

本文链接：https://blog.youkuaiyun.com/qq_36818627/article/details/81814436

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的层级轮播图效果。通过动态改变宽度、自定义动画和动态设置z-index值来实现图片切换。代码中详细展示了如何使用jQuery进行事件绑定，以响应鼠标悬停事件并平滑过渡到指定图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

涉及技术栈动态改变宽度、自定义动画、动态设置z-index值。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级轮播图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			.wrap{
				width: 650px;
				height: 250px;
				margin: 100px auto 0;
				position: relative;
				overflow: hidden;
			}
			.wrap img{
				display: block;
			}
			.wrap ul{
				height: 250px;
				z-index: 1;
				position: relative;
			}
			.wrap ol{
				height: 30px;
				z-index: 2;
				position: absolute;
				bottom: 0;
				right: 0;
			}
			.wrap > ul > li {
				position: absolute;
				top: 0;
				left: 0;
			}
			.wrap > ol > li{
				float: left;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border: 1px solid white;
				margin-right: 5px;
				background: Gray;
			}
			.wrap >ol > li:hover{
				cursor: pointer;
			}
			.wrap li.active{
				padding: 2px;
				color: orange;
				border: 1px solid orange;
			}
		</style>
		<script type="text/javascript" src="../../js/jquery-1.11.1.min.js" ></script>
		<script>
			$(function(){
				var zIndex = 0;
				// 1.选择所有的子代元素
				$(".wrap>ol>li").mouseenter(function(){
					zIndex++;
					console.log(zIndex);
					// 2. 增加序号
					var $this = $(this);
					index = $this.index();
					$(this).addClass("active").siblings().removeClass("active");
					// 3。选择ul下的li元素
					$(".wrap > ul > li").eq(index)
					                    .css({
					                    	"z-index": zIndex,
					                    	"left": 650
					                    })
					                    .animate({
					                    	"left":0
					                    },1000);
				});
			});
		</script>
	</head>
	<body>
<div class="wrap">
    <ul>
        <li style="z-index:1;"><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/05.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
	</body>
</html>

效果展示：