如何实现谷歌Doodles页同款带导航条的淡入淡出图片轮播

以下是可直接运行的完整实现代码，包含点击导航切换、淡入淡出过渡、自动轮播、悬浮暂停功能：

HTML 代码 #

<div class="slider-container">
    <img class="slidershow" id="slider" src="images/img1.gif" alt="轮播图">
    <div id="navigation">
        <div class="bar active" data-index="0"></div>
        <div class="bar" data-index="1"></div>
        <div class="bar" data-index="2"></div>
        <div class="bar" data-index="3"></div>
    </div>
</div>

CSS 代码 #

.slider-container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.slidershow {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease;
    opacity: 1;
}

.slidershow.fade-out {
    opacity: 0;
}

#navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.bar {
    width: 50px;
    height: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.4;
}

.bar.active {
    opacity: 1;
}

.bar[data-index="0"] {
    background-color: #3875fc;
}
.bar[data-index="1"] {
    background-color: #ff8809;
}
.bar[data-index="2"] {
    background-color: #19be29;
}
.bar[data-index="3"] {
    background-color: #fa4842;
}

JavaScript 代码 #

const imgArray = [
    'images/img1.gif',
    'images/img2.gif',
    'images/img3.jpg',
    'images/img4.jpg'
];
let curIndex = 0;
const imgDuration = 3000;
let autoPlayTimer = null;
const slider = document.getElementById('slider');
const navBars = document.querySelectorAll('.bar');

// 切换图片函数
function switchImg(index) {
    if (index === curIndex) return;
    curIndex = index;
    slider.classList.add('fade-out');
    setTimeout(() => {
        slider.src = imgArray[curIndex];
        slider.classList.remove('fade-out');
        updateNavActive();
    }, 500);
}

// 更新导航条激活状态
function updateNavActive() {
    navBars.forEach((bar, idx) => {
        idx === curIndex ? bar.classList.add('active') : bar.classList.remove('active');
    });
}

// 启动自动轮播
function startAutoPlay() {
    autoPlayTimer = setInterval(() => {
        const nextIndex = curIndex + 1 >= imgArray.length ? 0 : curIndex + 1;
        switchImg(nextIndex);
    }, imgDuration);
}

// 暂停自动轮播
function stopAutoPlay() {
    if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
    }
}

// 绑定导航点击事件
navBars.forEach(bar => {
    bar.addEventListener('click', () => {
        const targetIndex = Number(bar.dataset.index);
        switchImg(targetIndex);
        stopAutoPlay();
        startAutoPlay();
    });
});

// 鼠标悬浮暂停轮播，移出恢复
slider.addEventListener('mouseenter', stopAutoPlay);
slider.addEventListener('mouseleave', startAutoPlay);

// 页面加载完成启动轮播
window.addEventListener('load', startAutoPlay);

注意事项 #

• 请将imgArray内的图片路径替换为你本地的实际图片路径
• 轮播容器的宽高、导航条的样式、过渡动画时长都可以根据需求自行调整，CSS过渡时长和JS中setTimeout的时长保持一致效果会更流畅

内容的提问来源于stack exchange，提问作者dt123