WEB小项目--自动轮播图

目的

代码

技术细节

1. HTML结构

基本结构

具体内容

内容布局

2. CSS样式

3. JavaScript功能

小结

目的

为了在用户浏览网页时制造更好的视觉效果和交互体验

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Google Fonts中的Noto Serif SC字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<style>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Noto Serif SC', serif; /* 应用行书字体 */
}

.wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    height: 400px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
}
.card{
    width: 80px;
    border-radius: .75rem;
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2rem;
    margin: 0 10px;
    display: flex;
    align-items: flex-end;
    transition: .6s cubic-bezier(.28,-0.03,0,.99);
    box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
}

.card > .row{
    color: white;
    display: flex;
    flex-wrap: nowrap;
}
.card > .row >.icon{
    background: #223;
    color: white;
    border-radius: 50%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
}
.card > .row > .description{
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    height: 80px;
    width: 500px;
    opacity: 0;
    transform: translateY(30px);
    transition-delay: .3s;
    transition: all .3s ease;
}
.description p{
    color: #b0b0ba;
    padding-top: 5px;
}
.description h4{
    text-transform: uppercase;
}
input{
    display: none;
}
input:checked + label {
    width: 500px;
}
input:checked + label .description{
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.card[for ="c1"]{
    background-image: url(./img/5.jpg);
}
.card[for ="c2"]{
    background-image: url(./img/1.jpg);
}
.card[for ="c3"]{
    background-image: url(./img/6.jpg);
}
.card[for ="c4"]{
    background-image: url(./img/4.jpg);
}
</style>
</head>

<body>
<div></div>
<hr width="2000px">

    <div class="cs3"></div>

    <div class="wrapper">
        <div class="container">
            <input type="radio" name="slide" id="c1" checked>
            <label for="c1" class="card">
                <div class="row">
                    <div class="icon">1</div>
                    <div class="description">
                        <h4>将进酒</h4>
                        <p>君不见黄河之水天上来，奔流到海不复回。</p>
                    </div>
                </div>
            </label>

            <input type="radio" name="slide" id="c2" >
            <label for="c2" class="card">
                <div class="row">
                    <div class="icon">2</div>
                    <div class="description">
                        <h4>关山月</h4>
                        <p>明月出天山，苍茫云海间</p>
                    </div>
                </div>
            </label>


            <input type="radio" name="slide" id="c3" >
            <label for="c3" class="card">
                <div class="row">
                    <div class="icon">3</div>
                    <div class="description">
                        <h4>月下独酌</h4>
                        <p>花间一壶酒，独酌无相亲</p>
                    </div>
                </div>
            </label>


            <input type="radio" name="slide" id="c4" >
            <label for="c4" class="card">
                <div class="row">
                    <div class="icon">4</div>
                    <div class="description">
                        <h4>江上吟</h4>
                        <p>木兰之枻沙棠舟，玉箫金管坐两头</p>
                    </div>
                </div>
            </label>


        </div>
    </div>

<script>
    // 获取所有的radio按钮
    const radios = document.querySelectorAll('input[name="slide"]');
    let current = 0;

    // 设置自动轮播
    setInterval(() => {
        radios[current].checked = false;
        current = (current + 1) % radios.length;
        radios[current].checked = true;
    }, 3000); // 3秒切换一次
</script>
</body>
</html>

配图的url需要是自己的路径，如果您需要可以联系我

技术细节

1. HTML结构

基本结构

<!DOCTYPE html>: 声明文档类型为HTML5。
<html lang="en">: 根元素，语言设置为英语。
<head>: 包含文档的元数据，如字符集、视口设置、标题和样式表链接。
<body>: 包含网页的主要内容。

具体内容

<meta charset="UTF-8">: 设置字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使页面适应不同设备的屏幕宽度。
<title>Document</title>: 设置网页标题。
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">: 引入Google Fonts中的“Noto Serif SC”字体。

内容布局

<div class="wrapper">: 包裹整个内容区域，使用Flexbox布局使其居中对齐。
<div class="container">: 包含卡片的容器，使用Flexbox布局使其水平排列。
<input type="radio" name="slide" id="c1" checked>: 单选按钮，用于控制卡片的显示。
<label for="c1" class="card">: 卡片的标签，包含图标和描述。

2. CSS样式

基本样式

*: 通配选择器，设置所有元素的盒模型为border-box，去除默认的margin和padding，设置默认字体。
.wrapper: 设置宽度为100%，高度为视口高度，使用Flexbox布局使其居中对齐。
.container: 设置高度为400px，使用Flexbox布局使其水平排列。
.card: 设置卡片的样式，包括宽度、边框半径、背景大小、鼠标指针样式、过渡效果和阴影。
.card > .row: 设置行的样式，包括颜色和Flexbox布局。
.card > .row > .icon: 设置图标的样式，包括背景颜色、文字颜色、边框半径、宽度、Flexbox布局和居中对齐。
.card > .row > .description: 设置描述的样式，包括Flexbox布局、溢出隐藏、高度、宽度、透明度、变换和过渡效果。
.description p: 设置段落的样式，包括颜色和内边距。
.description h4: 设置标题的样式，包括文本转换为大写。
input: 隐藏单选按钮。
input:checked + label: 当单选按钮被选中时，设置标签的宽度。
input:checked + label .description: 当单选按钮被选中时，设置描述的透明度和变换。
.card[for="c1"]: 设置特定卡片的背景图片。
.card[for="c2"]: 设置特定卡片的背景图片。
.card[for="c3"]: 设置特定卡片的背景图片。
.card[for="c4"]: 设置特定卡片的背景图片。

3. JavaScript功能

自动轮播

获取所有单选按钮: 使用document.querySelectorAll('input[name="slide"]')获取所有具有相同name属性的单选按钮。
设置当前索引: 初始化当前索引为0。
设置定时器: 使用setInterval函数每隔3秒切换一次选中的单选按钮，实现自动轮播效果。