仿网易云官网轮播图打造视听盛宴，点缀美好生活

2023-12-01 21:20:01

效果解析

在仿网易云官网轮播图中，我们可以看到轮播图拥有以下效果：

自动轮播：轮播图会自动播放，每张图片间隔5秒切换。
左右箭头按钮：在轮播图两侧，分别有左右箭头按钮，点击即可切换图片。
下方小圆点：在轮播图下方，有一排小圆点，每个小圆点对应一张图片，点击小圆点即可切换到相应的图片。
鼠标移入时停止自动轮播：当鼠标移入轮播图时，自动轮播会停止，当鼠标移出轮播图时，自动轮播会继续播放。

2. 实现步骤

1）HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
        <ul class="banner-list">
            <li class="banner-item"><img src="images/banner1.jpg" alt="Banner1"></li>
            <li class="banner-item"><img src="images/banner2.jpg" alt="Banner2"></li>
            <li class="banner-item"><img src="images/banner3.jpg" alt="Banner3"></li>
            <li class="banner-item"><img src="images/banner4.jpg" alt="Banner4"></li>
        </ul>
        <div class="banner-btn banner-prev">&lt;</div>
        <div class="banner-btn banner-next">&gt;</div>
        <div class="banner-indicator">
            <ul>
                <li class="indicator-item active"></li>
                <li class="indicator-item"></li>
                <li class="indicator-item"></li>
                <li class="indicator-item"></li>
            </ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2）CSS代码

/* Banner容器样式 */
.banner {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

/* Banner列表样式 */
.banner-list {
    width: 400%;
    height: 100%;
    position: relative;
}

/* Banner项目样式 */
.banner-item {
    width: 25%;
    height: 100%;
    float: left;
}

/* Banner图片样式 */
.banner-item img {
    width: 100%;
    height: 100%;
}

/* Banner按钮样式 */
.banner-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    cursor: pointer;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 20px;
}

/* Banner按钮-上一个 */
.banner-prev {
    left: 10px;
}

/* Banner按钮-下一个 */
.banner-next {
    right: 10px;
}

/* Banner指示器容器样式 */
.banner-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}

/* Banner指示器列表样式 */
.banner-indicator ul {
    display: flex;
}

/* Banner指示器项目样式 */
.banner-indicator li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #fff;
}

/* Banner指示器项目-当前活动 */
.banner-indicator li.active {
    background-color: #333;
}

3）JavaScript代码

var banner = document.querySelector('.banner');
var bannerList = document.querySelector('.banner-list');
var bannerItems = document.querySelectorAll('.banner-item');
var bannerBtns = document.querySelectorAll('.banner-btn');
var bannerIndicators = document.querySelectorAll('.banner-indicator li');

// 当前轮播图索引
var currentSlide = 0;

// 轮播图自动播放
var autoplayTimer;

// 初始化轮播图
function initBanner() {
    // 设置轮播图宽度
    bannerList.style.width = bannerItems.length * 100 + '%';

    // 设置轮播图项目宽度
    for (var i = 0; i < bannerItems.length; i++) {
        bannerItems[i].style.width = 100 / bannerItems.length + '%';
    }

    // 设置轮播图指示器
    for (var i = 0; i < bannerIndicators.length; i++) {
        bannerIndicators[i].onclick = function () {
            changeSlide(i);
        }
    }

    // 启动自动轮播
    startAutoplay();
}

// 改变轮播图
function changeSlide(index) {
    // 清除自动轮播定时器
    clearInterval(autoplayTimer);

    // 设置当前轮播图索引
    currentSlide = index;

    // 更新轮播图位置
    bannerList.style.transform = 'translateX(-' + currentSlide * 100 + '%)';

    // 更新轮播图指示器
    for (var i = 0; i < bannerIndicators.length; i++) {
        bannerIndicators[i].classList.remove('active');
    }
    bannerIndicators[currentSlide].classList.add('active');

    // 重新启动自动轮播
    startAutoplay();
}

// 自动轮播
function startAutoplay() {
    autoplayTimer = setInterval(function () {
        changeSlide((currentSlide + 1) % bannerItems.length);
    }, 5000);
}

// 停止自动轮播
function stopAutoplay() {
    clearInterval(autoplayTimer);
}

// 鼠标移入轮播图时停止自动轮播，鼠标移出轮播图时重新启动自动轮播
banner.onmouseenter = function () {
    stopAutoplay();
};
banner.onmouseleave = function () {
    startAutoplay();
};

// 点击左右按钮切换轮播图
bannerBtns[0].onclick = function () {
    changeSlide(currentSlide - 1);
};
bannerBtns[1].onclick = function () {
    changeSlide(currentSlide + 1);
};

// 初始化轮播图
initBanner();