css在轮播图片上加导航栏
导读：CSS是前端开发中必不可少的技术之一，它可以让网页元素呈现出美观、统一的风格。在轮播图片上加导航栏也是常见的功能之一，下面我将给大家介绍如何实现。首先看一下HTML代码的结构，我们通常会用一个div包含所有的图片，然后再用一个div包含导航...
CSS是前端开发中必不可少的技术之一，它可以让网页元素呈现出美观、统一的风格。在轮播图片上加导航栏也是常见的功能之一，下面我将给大家介绍如何实现。首先看一下HTML代码的结构，我们通常会用一个div包含所有的图片，然后再用一个div包含导航栏。代码如下：
div class="slider">
img src="1.jpg">
img src="2.jpg">
img src="3.jpg">
/div>
div class="nav">
span class="active">
/span>
span>
/span>
span>
/span>
/div>
接下来就是CSS代码的实现了。首先我们要定义slider的样式，这里用的是绝对定位，让图片叠在一起形成轮播效果。同时要注意设置轮播图片的宽度和高度，以保证轮播效果正常。代码如下：
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
接下来是导航栏的样式，这里我们用三个span标签作为导航栏的按钮，同时给第一个按钮加上active类名，表示默认选中第一个。同时通过绝对定位来使导航栏居中。代码如下：
.nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.nav span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.nav span.active {
background-color: #000;
}
最后是JavaScript代码的实现，我们需要监听导航栏的点击事件，并将active类名分别加在轮播图片和对应的导航栏按钮上。同时还需要用setInterval函数实现自动播放功能。代码如下：
let slider = document.querySelector('.slider');
let nav = document.querySelector('.nav');
let spans = nav.querySelectorAll('span');
let index = 0;
setInterval(function() {
index++;
if (index === spans.length) {
index = 0;
}
changeImage(index);
}
, 2000);
function changeImage(number) {
let currentImage = slider.querySelector('.active');
let currentSpan = nav.querySelector('.active');
currentImage.classList.remove('active');
currentSpan.classList.remove('active');
slider.querySelectorAll('img')[number].classList.add('active');
spans[number].classList.add('active');
}
for (let i = 0;
i spans.length;
i++) {
spans[i].addEventListener('click', function() {
index = i;
changeImage(index);
}
);
}
通过这些CSS和JavaScript代码的实现，我们就可以轻松地在轮播图片上添加导航栏了。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css在轮播图片上加导航栏
本文地址： https://pptw.com/jishu/568659.html