css在图片上添加轮播圆圈

CSS可以帮助我们在图片上创建轮播圆圈，让网站更加动态有趣。下面让我们看一下具体实现过程。

HTML代码：div class="slider">
    img src="img1.jpg" alt="Image 1">
    img src="img2.jpg" alt="Image 2">
    img src="img3.jpg" alt="Image 3">
    img src="img4.jpg" alt="Image 4">
    /div>
    div class="dots">
    span class="dot dot1 active">
    /span>
    span class="dot dot2">
    /span>
    span class="dot dot3">
    /span>
    span class="dot dot4">
    /span>
    /div>
CSS代码：.slider {
    width: 100%;
    position: relative;
}
.slider img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.active {
    background-color: #fff;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 10px;
    cursor: pointer;
    transition: background-color 0.5s ease-in-out;
}
.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
    JavaScript代码：const slider = document.querySelector('.slider');
    const dots = document.querySelectorAll('.dot');
    let currentSlide = 0;
    let interval = setInterval(() =>
 {
    nextSlide();
}
    , 5000);
function nextSlide() {
    currentSlide++;
    if (currentSlide >
= slider.children.length) {
    currentSlide = 0;
}
    changeSlide(currentSlide);
}
function changeSlide(slideNumber) {
    slider.children[slideNumber].style.opacity = 1;
    slider.children[slideNumber].style.zIndex = 1;
    for (let i = 0;
     i  dots.length;
 i++) {
    dots[i].classList.remove('active');
}
    dots[slideNumber].classList.add('active');
    for (let i = 0;
     i  slider.children.length;
 i++) {
if (slider.children[i] !== slider.children[slideNumber]) {
    slider.children[i].style.opacity = 0;
    slider.children[i].style.zIndex = 0;
}
}
}
    dots.forEach((dot, index) =>
 {
    dot.addEventListener('click', () =>
 {
    clearInterval(interval);
    currentSlide = index;
    changeSlide(currentSlide);
    interval = setInterval(() =>
 {
    nextSlide();
}
    , 5000);
}
    );
}
    );
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！