菜单+轮播图菜单+轮播图

最新推荐文章于 2023-05-15 11:41:58 发布

某某287

最新推荐文章于 2023-05-15 11:41:58 发布

阅读量206

点赞数 2

文章标签： css html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62680675/article/details/129113076

版权

此代码示例展示了如何使用HTML、CSS和JavaScript创建一个具有下拉菜单的响应式导航栏，并实现图片轮播功能，包括左右箭头控制和小圆点指示器。当鼠标悬停在主菜单项上时，子菜单会以淡入效果出现；点击左右箭头可以平滑地切换图片，小圆点则表示当前显示的图片位置。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

body{

margin: auto;

background-color: antiquewhite;

}

.menu{

position: absolute;

height: 60px;

width: 1200px;

background-color: coral;

list-style: none;

left: 400px;

float: left;

}

text-decoration: none;

color: black;

}

ul{

/* height: 50px;

line-height: 50px;

float: left; */

}

.aa11>li{

position: relative;

list-style: none;

width: 200px;

height: 50px;

line-height: 50px;

float: left;

margin-left: 40px;

z-index: 2;

}

ul>li:hover a{

padding: 0 30px;

color: aqua;

background-color: blue;

height: 50px;

line-height: 50px;

display: inline-block;

}

.aa{

opacity: 0;

position: absolute;

width: 200px;

}

.aa>li{

width: 80px;

height: 50px;

list-style: none;

position: relative;

margin-left: 10px;

float: left;

}

.lis:hover .aa{

opacity: 0.8;

margin-left : 0px;

padding: 0 30px;

margin-left: -40px;

position: relative;

}

/* .lis1{

margin-left: -100px;

} */

ul {

list-style: none;

}

#wrap {

overflow: hidden;

position: absolute;

width: 1700px;

height: 480px;

margin: 200px auto 0;

margin-left: 200px;

margin-top: 80px;

z-index: 1;

}

#wrap .img-list {

display: flex;

position: relative;

left: 0px;

width: 1700px;

height: 480px;

transition: 0.5s ease;

}

#wrap .img-list img {

width: 100%;

cursor: pointer;

}

#wrap a {

position: absolute;

top: 50%;

width: 40px;

height: 70px;

font-size: 30px;

text-align: center;

line-height: 70px;

text-decoration: none;

color: white;

transform: translate(0, -50%);

display: block;

background-color: rgba(0, 0, 0, 0.7);

user-select: none;

}

#wrap a.left {

left: 0;

}

#wrap a.right {

right: 0;

}

.circle-list {

display: flex;

position: absolute;

bottom: 20px;

left: 50%;

transform: translate(-50%, 0);

width: 240px;

height: 40px;

z-index: 8;

line-height: 30px;

opacity: 0.7;

}

.circle-list > .circle {

margin: 0 5px;

width: 30px;

height: 30px;

background-color: #ecf0f1;

border-radius: 50%;

}

.circle-list > .circle.active {

background-color: #e74c3c;

}

</style>

</head>

<body>

</ul>

</li>

</ul>

</div>

</div>

</div>

</ul>

</div>

// 获取左右按钮和图片列表

let oLeft = document.querySelector(".left");

let oRight = document.querySelector(".right");

let oImgList = document.querySelector(".img-list");

// 克隆第一张图片

let clonefirstImg = oImgList.firstElementChild.cloneNode();

// 将第一张图片添加至图片列表的末尾

oImgList.appendChild(clonefirstImg);

// 图片索引代表当前是第几张图片 index:0代表第一张图片

let index = 0;

// 设置函数节流锁

let lock = true;

function handleRightBtn() {

if (!lock) return;

index++;

oImgList.style.left = index * -1700 + "px";

// 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉

oImgList.style.transition = "0.5s ease";

if (index === 5) {

index = 0;

setTimeout(() => {

oImgList.style.left = 0;

// 取消过渡 500毫秒之后切换第一张

oImgList.style.transition = "none";

}, 500);

}

// 设置小圆点的高亮

setCircles();

// 关锁

lock = false;

setTimeout(() => {

lock = true;

}, 500);

}

// 获取五个小圆点

const circles = document.querySelectorAll(".circle");

// 小圆点高亮的显示

function setCircles() {

for (let i = 0; i < circles.length; i++) {

if (i === index) {

circles[i].classList.add("active");

} else {

circles[i].classList.remove("active");

}

// 自动轮播

let autoplay = setInterval(handleRightBtn, 2000);

const oWrap = document.getElementById("wrap");

// 移入停止轮播

oWrap.addEventListener("mouseenter", () => {

clearInterval(autoplay);

});

// 移出继续轮播

oWrap.addEventListener("mouseleave", () => {

// 设表先关

clearInterval(autoplay);

autoplay = setInterval(handleRightBtn, 2000);

});

</script>

</body>

</html>

某某287

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

菜单+轮播图 菜单+轮播图

菜单+轮播图菜单+轮播图