HTML&CSS：超好看的轮播图，你绝对用得上（建议收藏）

前端Hardy2025-04-02 17:09

这段代码实现了一个具有现代设计风格的网页，包含响应式导航栏、图片轮播功能和交互式菜单。它结合了HTML、CSS和JavaScript技术，提供了良好的用户体验。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Barlow:400,500,700");

        .container {
            margin: auto;
            padding: 0 1rem;
            max-width: 71.25rem;
            width: 100%;
        }

        .grid {
            display: flex;
            flex-direction: column;
            flex-flow: row wrap;
        }

        .grid>[class*=column-] {
            display: block;
        }

        .first {
            order: -1;
        }

        .last {
            order: 12;
        }

        .align-top {
            align-items: start;
        }

        .align-center {
            align-items: center;
        }

        .align-bottom {
            align-items: end;
        }

        .column-xs-1 {
            flex-basis: 8.3333333333%;
            max-width: 8.3333333333%;
        }

        .column-xs-2 {
            flex-basis: 16.6666666667%;
            max-width: 16.6666666667%;
        }

        .column-xs-3 {
            flex-basis: 25%;
            max-width: 25%;
        }

        .column-xs-4 {
            flex-basis: 33.3333333333%;
            max-width: 33.3333333333%;
        }

        .column-xs-5 {
            flex-basis: 41.6666666667%;
            max-width: 41.6666666667%;
        }

        .column-xs-6 {
            flex-basis: 50%;
            max-width: 50%;
        }

        .column-xs-7 {
            flex-basis: 58.3333333333%;
            max-width: 58.3333333333%;
        }

        .column-xs-8 {
            flex-basis: 66.6666666667%;
            max-width: 66.6666666667%;
        }

        .column-xs-9 {
            flex-basis: 75%;
            max-width: 75%;
        }

        .column-xs-10 {
            flex-basis: 83.3333333333%;
            max-width: 83.3333333333%;
        }

        .column-xs-11 {
            flex-basis: 91.6666666667%;
            max-width: 91.6666666667%;
        }

        .column-xs-12 {
            flex-basis: 100%;
            max-width: 100%;
        }

        @media (min-width: 48rem) {
            .column-sm-1 {
                flex-basis: 8.3333333333%;
                max-width: 8.3333333333%;
            }

            .column-sm-2 {
                flex-basis: 16.6666666667%;
                max-width: 16.6666666667%;
            }

            .column-sm-3 {
                flex-basis: 25%;
                max-width: 25%;
            }

            .column-sm-4 {
                flex-basis: 33.3333333333%;
                max-width: 33.3333333333%;
            }

            .column-sm-5 {
                flex-basis: 41.6666666667%;
                max-width: 41.6666666667%;
            }

            .column-sm-6 {
                flex-basis: 50%;
                max-width: 50%;
            }

            .column-sm-7 {
                flex-basis: 58.3333333333%;
                max-width: 58.3333333333%;
            }

            .column-sm-8 {
                flex-basis: 66.6666666667%;
                max-width: 66.6666666667%;
            }

            .column-sm-9 {
                flex-basis: 75%;
                max-width: 75%;
            }

            .column-sm-10 {
                flex-basis: 83.3333333333%;
                max-width: 83.3333333333%;
            }

            .column-sm-11 {
                flex-basis: 91.6666666667%;
                max-width: 91.6666666667%;
            }

            .column-sm-12 {
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        @media (min-width: 62rem) {
            .column-md-1 {
                flex-basis: 8.3333333333%;
                max-width: 8.3333333333%;
            }

            .column-md-2 {
                flex-basis: 16.6666666667%;
                max-width: 16.6666666667%;
            }

            .column-md-3 {
                flex-basis: 25%;
                max-width: 25%;
            }

            .column-md-4 {
                flex-basis: 33.3333333333%;
                max-width: 33.3333333333%;
            }

            .column-md-5 {
                flex-basis: 41.6666666667%;
                max-width: 41.6666666667%;
            }

            .column-md-6 {
                flex-basis: 50%;
                max-width: 50%;
            }

            .column-md-7 {
                flex-basis: 58.3333333333%;
                max-width: 58.3333333333%;
            }

            .column-md-8 {
                flex-basis: 66.6666666667%;
                max-width: 66.6666666667%;
            }

            .column-md-9 {
                flex-basis: 75%;
                max-width: 75%;
            }

            .column-md-10 {
                flex-basis: 83.3333333333%;
                max-width: 83.3333333333%;
            }

            .column-md-11 {
                flex-basis: 91.6666666667%;
                max-width: 91.6666666667%;
            }

            .column-md-12 {
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        @media (min-width: 75rem) {
            .column-lg-1 {
                flex-basis: 8.3333333333%;
                max-width: 8.3333333333%;
            }

            .column-lg-2 {
                flex-basis: 16.6666666667%;
                max-width: 16.6666666667%;
            }

            .column-lg-3 {
                flex-basis: 25%;
                max-width: 25%;
            }

            .column-lg-4 {
                flex-basis: 33.3333333333%;
                max-width: 33.3333333333%;
            }

            .column-lg-5 {
                flex-basis: 41.6666666667%;
                max-width: 41.6666666667%;
            }

            .column-lg-6 {
                flex-basis: 50%;
                max-width: 50%;
            }

            .column-lg-7 {
                flex-basis: 58.3333333333%;
                max-width: 58.3333333333%;
            }

            .column-lg-8 {
                flex-basis: 66.6666666667%;
                max-width: 66.6666666667%;
            }

            .column-lg-9 {
                flex-basis: 75%;
                max-width: 75%;
            }

            .column-lg-10 {
                flex-basis: 83.3333333333%;
                max-width: 83.3333333333%;
            }

            .column-lg-11 {
                flex-basis: 91.6666666667%;
                max-width: 91.6666666667%;
            }

            .column-lg-12 {
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        @supports (display: grid) {
            .grid {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: auto;
            }

            .grid>[class*=column-] {
                margin: 0;
                max-width: 100%;
            }

            .column-xs-1 {
                grid-column-start: span 1;
                grid-column-end: span 1;
            }

            .column-xs-2 {
                grid-column-start: span 2;
                grid-column-end: span 2;
            }

            .column-xs-3 {
                grid-column-start: span 3;
                grid-column-end: span 3;
            }

            .column-xs-4 {
                grid-column-start: span 4;
                grid-column-end: span 4;
            }

            .column-xs-5 {
                grid-column-start: span 5;
                grid-column-end: span 5;
            }

            .column-xs-6 {
                grid-column-start: span 6;
                grid-column-end: span 6;
            }

            .column-xs-7 {
                grid-column-start: span 7;
                grid-column-end: span 7;
            }

            .column-xs-8 {
                grid-column-start: span 8;
                grid-column-end: span 8;
            }

            .column-xs-9 {
                grid-column-start: span 9;
                grid-column-end: span 9;
            }

            .column-xs-10 {
                grid-column-start: span 10;
                grid-column-end: span 10;
            }

            .column-xs-11 {
                grid-column-start: span 11;
                grid-column-end: span 11;
            }

            .column-xs-12 {
                grid-column-start: span 12;
                grid-column-end: span 12;
            }

            @media (min-width: 48rem) {
                .column-sm-1 {
                    grid-column-start: span 1;
                    grid-column-end: span 1;
                }

                .column-sm-2 {
                    grid-column-start: span 2;
                    grid-column-end: span 2;
                }

                .column-sm-3 {
                    grid-column-start: span 3;
                    grid-column-end: span 3;
                }

                .column-sm-4 {
                    grid-column-start: span 4;
                    grid-column-end: span 4;
                }

                .column-sm-5 {
                    grid-column-start: span 5;
                    grid-column-end: span 5;
                }

                .column-sm-6 {
                    grid-column-start: span 6;
                    grid-column-end: span 6;
                }

                .column-sm-7 {
                    grid-column-start: span 7;
                    grid-column-end: span 7;
                }

                .column-sm-8 {
                    grid-column-start: span 8;
                    grid-column-end: span 8;
                }

                .column-sm-9 {
                    grid-column-start: span 9;
                    grid-column-end: span 9;
                }

                .column-sm-10 {
                    grid-column-start: span 10;
                    grid-column-end: span 10;
                }

                .column-sm-11 {
                    grid-column-start: span 11;
                    grid-column-end: span 11;
                }

                .column-sm-12 {
                    grid-column-start: span 12;
                    grid-column-end: span 12;
                }
            }

            @media (min-width: 62rem) {
                .column-md-1 {
                    grid-column-start: span 1;
                    grid-column-end: span 1;
                }

                .column-md-2 {
                    grid-column-start: span 2;
                    grid-column-end: span 2;
                }

                .column-md-3 {
                    grid-column-start: span 3;
                    grid-column-end: span 3;
                }

                .column-md-4 {
                    grid-column-start: span 4;
                    grid-column-end: span 4;
                }

                .column-md-5 {
                    grid-column-start: span 5;
                    grid-column-end: span 5;
                }

                .column-md-6 {
                    grid-column-start: span 6;
                    grid-column-end: span 6;
                }

                .column-md-7 {
                    grid-column-start: span 7;
                    grid-column-end: span 7;
                }

                .column-md-8 {
                    grid-column-start: span 8;
                    grid-column-end: span 8;
                }

                .column-md-9 {
                    grid-column-start: span 9;
                    grid-column-end: span 9;
                }

                .column-md-10 {
                    grid-column-start: span 10;
                    grid-column-end: span 10;
                }

                .column-md-11 {
                    grid-column-start: span 11;
                    grid-column-end: span 11;
                }

                .column-md-12 {
                    grid-column-start: span 12;
                    grid-column-end: span 12;
                }
            }

            @media (min-width: 75rem) {
                .column-lg-1 {
                    grid-column-start: span 1;
                    grid-column-end: span 1;
                }

                .column-lg-2 {
                    grid-column-start: span 2;
                    grid-column-end: span 2;
                }

                .column-lg-3 {
                    grid-column-start: span 3;
                    grid-column-end: span 3;
                }

                .column-lg-4 {
                    grid-column-start: span 4;
                    grid-column-end: span 4;
                }

                .column-lg-5 {
                    grid-column-start: span 5;
                    grid-column-end: span 5;
                }

                .column-lg-6 {
                    grid-column-start: span 6;
                    grid-column-end: span 6;
                }

                .column-lg-7 {
                    grid-column-start: span 7;
                    grid-column-end: span 7;
                }

                .column-lg-8 {
                    grid-column-start: span 8;
                    grid-column-end: span 8;
                }

                .column-lg-9 {
                    grid-column-start: span 9;
                    grid-column-end: span 9;
                }

                .column-lg-10 {
                    grid-column-start: span 10;
                    grid-column-end: span 10;
                }

                .column-lg-11 {
                    grid-column-start: span 11;
                    grid-column-end: span 11;
                }

                .column-lg-12 {
                    grid-column-start: span 12;
                    grid-column-end: span 12;
                }
            }
        }

        * {
            box-sizing: border-box;
        }

        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            font-family: "Barlow", sans-serif;
            font-size: 1.125rem;
            font-weight: 400;
            line-height: 1.6;
            color: #8d8d8d;
            background: #fff;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

        a {
            color: #8d8d8d;
            text-decoration: none;
        }

        a:hover {
            color: #232323;
        }

        nav {
            position: relative;
            z-index: 2;
            padding: 1.25rem 0 1.25rem 0;
        }

        nav ul {
            line-height: 2.2;
            display: flex;
            justify-content: flex-start;
        }

        nav ul li {
            margin: 0.325rem 0;
        }

        #logo {
            color: #232323;
            font-weight: 700;
            font-size: 1.125rem;
        }

        #highlight {
            color: #e83f43;
        }

        img {
            width: 100%;
            height: 43vh;
            object-fit: cover;
        }

        .vertical {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .intro {
            position: relative;
            z-index: 2;
            opacity: 0;
            animation: fadeIn 0.8s 0.4s ease forwards;
        }

        .intro .title {
            display: inline-block;
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.1;
            text-decoration: underline;
            color: #e83f43;
        }

        .intro .title .underline {
            color: #232323;
        }

        .description {
            position: relative;
            z-index: 1;
            margin: 1rem 0 1.5rem 0;
            font-size: 1rem;
            opacity: 0;
            animation: fadeIn 0.8s 0.6s ease forwards;
        }

        .slider-item {
            display: none;
        }

        .slider-item.active {
            display: block;
        }

        .slider-item.active .hide-mobile {
            display: none;
        }

        .slider-item.active .show-mobile {
            display: block;
            margin: 1rem 0;
        }

        button {
            position: relative;
            display: inline-block;
            cursor: pointer;
            outline: none;
            border: 0;
            vertical-align: middle;
            text-decoration: none;
            background: transparent;
            margin: 0;
            padding: 0;
            font-size: 100%;
            font: inherit;
            font-size: inherit;
            width: 55px;
            height: 55px;
        }

        .controls {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: flex-end;
            padding: 0.25rem 0 0.25rem 0;
        }

        .controls .previous {
            border: 1px solid #232323;
        }

        .controls .next {
            border-top: 1px solid #232323;
            border-right: 1px solid #232323;
            border-bottom: 1px solid #232323;
        }

        .controls .icon {
            position: relative;
            margin: auto;
            width: 20px;
            height: 1px;
            background-color: currentColor;
        }

        .controls .icon.arrow-left::before {
            content: "";
            position: absolute;
            left: 1px;
            top: -4px;
            width: 9px;
            height: 9px;
            border-top: solid 1px currentColor;
            border-right: solid 1px currentColor;
            transform: rotate(-135deg);
        }

        .controls .icon.arrow-right::before {
            content: "";
            position: absolute;
            right: 1px;
            top: -4px;
            width: 9px;
            height: 9px;
            border-top: solid 1px currentColor;
            border-right: solid 1px currentColor;
            transform: rotate(45deg);
        }

        .previous,
        .next {
            display: flex;
            align-content: center;
            justify-content: center;
            flex-basis: 15%;
            font-size: 2rem;
            color: #232323;
        }

        .previous:hover .icon,
        .next:hover .icon {
            transform: scale(1.5);
        }

        .previous .icon,
        .next .icon {
            transition: transform 0.1s ease;
        }

        .active .image-holder::before {
            position: absolute;
            content: "";
            z-index: 1;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transform-origin: 100% 50%;
            animation: revealRight 1s cubic-bezier(0.23, 1, 0.75, 1) forwards;
        }

        @keyframes revealRight {
            0% {
                transform: scaleX(1);
            }

            100% {
                transform: scaleX(0);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(20%);
            }

            100% {
                opacity: 1;
                transform: translate(0);
            }
        }

        .toggle-nav {
            display: flex;
            justify-content: flex-end;
            font-size: 1rem;
            line-height: 1.9;
        }

        .toggle-nav i {
            font-size: 1.5rem;
            line-height: 1.3;
            margin: 0 0 0 0.5rem;
        }

        .flex-nav ul {
            position: absolute;
            z-index: 1;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            display: none;
            width: 100%;
            left: 0;
            padding: 1rem;
            background: #fff;
            text-align: center;
        }

        .flex-nav ul.active {
            display: flex;
        }

        @media (min-width: 62rem) {
            nav ul {
                justify-content: flex-end;
            }

            #logo {
                font-size: 1.25rem;
            }

            .controls {
                padding: 1.75rem 0 1.75rem 0;
            }

            .intro {
                animation: fadeInLeft 0.8s 0.4s ease forwards;
            }

            .intro .title {
                font-size: 4.25rem;
                padding: 2.5rem 2.5rem 3rem 2.5rem;
                background: #fff;
            }

            img {
                height: 60vh;
            }

            .description {
                font-size: 1.25rem;
                margin: 1rem 0 0 0;
            }

            .previous,
            .next {
                flex-basis: 8.33%;
            }

            .slider-item.active .hide-mobile {
                display: block;
            }

            .slider-item.active .show-mobile {
                display: none;
            }

            .toggle-nav {
                display: none;
            }

            .flex-nav ul {
                display: flex;
                flex-direction: row;
                position: relative;
                padding: 0;
                justify-content: flex-end;
            }

            nav {
                padding: 1.75rem 0 1.75rem 0;
            }

            nav ul {
                line-height: 2.2;
                display: flex;
                justify-content: flex-start;
            }

            nav ul li {
                font-size: 1rem;
                text-transform: uppercase;
                margin: 0 2rem 0 0;
            }

            nav ul li:nth-child(3) {
                margin: 0;
            }
        }

        .visually-hidden {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }
    </style>
</head>

<body>
    <nav class="flex-nav">
        <div class="container">
            <div class="grid">
                <div class="column-xs-9 column-md-8">
                    <p id="logo">Japan<span id="highlight">.</span></p>
                </div>
                <div class="column-xs-3 column-md-4">
                    <a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Discover</a></li>
                        <li><a href="#">Plan Your Trip</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <main class="intro-section">
        <div class="container">
            <div class="grid">
                <div class="column-xs-12">
                    <ul class="slider">
                        <li class="slider-item active">
                            <div class="grid vertical">
                                <div class="column-xs-12 column-md-2 hide-mobile">
                                    <div class="intro">
                                        <a href="#">
                                            <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
                                        </a>
                                    </div>
                                </div>
                                <div class="column-xs-12 column-md-10">
                                    <div class="image-holder">
                                        <img src="https://assets.codepen.io/1159990/tokyo.jpg">
                                    </div>
                                    <div class="grid">
                                        <div class="column-xs-12 column-md-9">
                                            <div class="intro show-mobile">
                                                <a href="#">
                                                    <h1 class="title"><span class="underline">Explore Tokyo</span></h1>
                                                </a>
                                            </div>
                                            <p class="description">Tokyo, Japan's busy capital, mixes the ultramodern
                                                and the traditional, from neon-lit skyscrapers to historic temples.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="slider-item">
                            <div class="grid vertical">
                                <div class="column-xs-12 column-md-2 hide-mobile">
                                    <div class="intro">
                                        <a href="#">
                                            <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
                                        </a>
                                    </div>
                                </div>
                                <div class="column-xs-12 column-md-10">
                                    <div class="image-holder">
                                        <img src="https://assets.codepen.io/1159990/kyoto.jpg">
                                    </div>
                                    <div class="grid">
                                        <div class="column-xs-12 column-md-9">
                                            <div class="intro show-mobile">
                                                <a href="#">
                                                    <h1 class="title"><span class="underline">Explore Kyoto</span></h1>
                                                </a>
                                            </div>
                                            <p class="description">Kyoto is famous for its numerous classical Buddhist
                                                temples, gardens, imperial palaces, Shinto shrines and traditional
                                                wooden houses.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="slider-item">
                            <div class="grid vertical">
                                <div class="column-xs-12 column-md-2 hide-mobile">
                                    <div class="intro">
                                        <a href="#">
                                            <h1 class="title"><span class="underline">Explore Osaka</span></h1>
                                        </a>
                                    </div>
                                </div>
                                <div class="column-xs-12 column-md-10">
                                    <div class="image-holder">
                                        <img src="https://assets.codepen.io/1159990/osaka.jpg">
                                    </div>
                                    <div class="grid">
                                        <div class="column-xs-12 column-md-9">
                                            <div class="intro show-mobile">
                                                <a href="#">
                                                    <h1 class="title"><span class="underline">Explore Osaka</span></h1>
                                                </a>
                                            </div>
                                            <p class="description">Osaka is a large port city and commercial center
                                                known for its modern architecture, nightlife and hearty street food.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="slider-item">
                            <div class="grid vertical">
                                <div class="column-xs-12 column-md-2 hide-mobile">
                                    <div class="intro">
                                        <a href="#">
                                            <h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
                                        </a>
                                    </div>
                                </div>
                                <div class="column-xs-12 column-md-10">
                                    <div class="image-holder">
                                        <img src="https://assets.codepen.io/1159990/hokkaido.jpg">
                                    </div>
                                    <div class="grid">
                                        <div class="column-xs-12 column-md-9">
                                            <div class="intro show-mobile">
                                                <a href="#">
                                                    <h1 class="title"><span class="underline">Explore Hokkaido</span>
                                                    </h1>
                                                </a>
                                            </div>
                                            <p class="description">Hokkaido, the northernmost of Japan's main islands,
                                                is known for its volcanoes, natural hot springs ("onsen") and ski areas.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="grid">
                        <div class="column-xs-12">
                            <div class="controls">
                                <button class="previous">
                                    <span class="visually-hidden">Previous</span>
                                    <span class="icon arrow-left" aria-hidden="true"></span>
                                    </a>
                                    <button class="next">
                                        <span class="visually-hidden">Next</span>
                                        <span class="icon arrow-right" aria-hidden="true"></span>
                                        </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </main>
    <script>
        const items = document.querySelectorAll(".slider-item");
        const itemCount = items.length;
        const nextItem = document.querySelector(".next");
        const previousItem = document.querySelector(".previous");
        const navItem = document.querySelector("a.toggle-nav");
        let count = 0;

        function showNextItem() {
            items[count].classList.remove("active");

            if (count < itemCount - 1) {
                count++;
            } else {
                count = 0;
            }

            items[count].classList.add("active");
            console.log(count);
        }

        function showPreviousItem() {
            items[count].classList.remove("active");

            if (count > 0) {
                count--;
            } else {
                count = itemCount - 1;
            }

            items[count].classList.add("active");
            console.log(count);
        }

        function toggleNavigation() {
            this.nextElementSibling.classList.toggle("active");
        }

        function keyPress(e) {
            e = e || window.event;

            if (e.keyCode == "37") {
                showPreviousItem();
            } else if (e.keyCode == "39") {
                showNextItem();
            }
        }

        nextItem.addEventListener("click", showNextItem);
        previousItem.addEventListener("click", showPreviousItem);
        document.addEventListener("keydown", keyPress);
        navItem.addEventListener("click", toggleNavigation);

    </script>
</body>

</html>

HTML 结构

  • 使用main标签定义主体内容区域。
  • 包含一个图片轮播功能，通过slider和slider-item实现轮播项。
  • 每个轮播项包含一个标题、描述和一张图片。
  • 提供"上一个"和"下一个"按钮，用于切换轮播项。

CSS 样式

  • .container：定义了一个响应式的容器，用于限制页面内容的最大宽度，并在两侧添加内边距。
  • .grid：使用Flexbox实现响应式网格布局，支持多列布局。
  • .column-xs-12：定义了不同屏幕尺寸下的列布局，通过flex-basis和max-width控制列的宽度。
  • fadeIn：定义了一个淡入动画，用于在页面加载时渐显内容。
  • .controls .icon.arrow-left::before：使用伪元素和边框样式创建箭头图标，用于轮播按钮。

JavaScript功能

js 复制代码 
function showNextItem() {
    items[count].classList.remove("active");
    if (count < itemCount - 1) {
        count++;
    } else {
        count = 0;
    }
    items[count].classList.add("active");
}
  • 通过JavaScript实现轮播项的切换，点击"下一个"按钮时切换到下一张图片。
js 复制代码 
function toggleNavigation() {
    this.nextElementSibling.classList.toggle("active");
}
  • 点击菜单按钮时，切换导航菜单的显示状态。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
游离状态的猫119 分钟前
JavaScript性能优化实战：从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中20 分钟前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
滿1 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj1 小时前
判断符号??，?. ，! ，!! ，|| ，&&，?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝1 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3112 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾2 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*2 小时前
WEBSTORM前端 —— 第2章：CSS —— 第3节：背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n2 小时前
CSS元素动画篇：基于当前位置的变换动画（一）
前端·css·html·css3·html5
前端_学习之路2 小时前
javaScript--数据结构和算法
javascript·数据结构·算法
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Coze扣子平台完整体验和实践（附国内和国际版对比）05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06我决定放弃搞 Java 了07DeepSeek各版本说明与优缺点分析08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09苍穹外卖面试总结10最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）