企业官网建设流程全解析

先来看效果

点击下方按钮可以做到平滑切换轮播，轮播图片可以根据自定义随心变化。

先来看一下页面代码结构

<div class="container"> <div class="lunbo-wrap"> <div id="slide"> </div> <div class="buttons"> <div class="s_button">&lt;</div> <div class="s_button">&gt;</div> </div> </div> </div>

在这段代码中，#slide的地方用于存放轮播图片和图片上的文字介绍，可以直接写成纯静态的卡片，也可以使用JS动态读取数据，动态生成卡片，完整的轮播结构应该如下（纯静态卡片可以按照下面的代码直接用），对于按钮来说，可以自己选择喜欢的按钮放在这里就行，调整切换按钮位置从CSS处调整即可

<div class="container"> <div class="lunbo-wrap"> <div id="slide"> <div class="item" style="background-image: url(&quot;img/photo1.jpg&quot;);"> <div class="content"> <div class="name">图片1</div> <div class="des">这是一串文字介绍</div> </div> </div> <div class="item" style="background-image: url(&quot;img/photo2.jpg&quot;);"> <div class="content"> <div class="name">图片2</div> <div class="des">这是一串文字介绍</div> </div> </div> <div class="item" style="background-image: url(&quot;img/photo3.jpg&quot;);"> <div class="content"> <div class="name">图片3</div> <div class="des">这是一串文字介绍</div> </div> </div> <div class="item" style="background-image: url(&quot;img/photo4.jpg&quot;);"> <div class="content"> <div class="name">图片4</div> <div class="des">这是一串文字介绍</div> </div> </div> <div class="item" style="background-image: url(&quot;img/photo5.jpg&quot;);"> <div class="content"> <div class="name">图片5</div> <div class="des">这是一串文字介绍</div> </div> </div> <div class="item" style="background-image: url(&quot;img/photo6.jpg&quot;);"> <div class="content"> <div class="name">图片6</div> <div class="des">这是一串文字介绍</div> </div> </div> </div> <div class="buttons"> <div class="s_button">&lt;</div> <div class="s_button">&gt;</div> </div> </div> </div>

如果需要动态的添加卡片，则可以使用如下的JS，这里记得导入JQuery的文件

$(document).ready(function() { $.getJSON('js/lunboJsonUp.json', function(data) { console.log("data:", data) const $slide = $('#slide'); // 渲染轮播图 data.forEach(item => { const $item = $('<div class="item"></div>') .css('background-image', `url(${item.image})`) .append( $('<div class="content"></div>').append( $('<div class="name"></div>').text(item.photoName), $('<div class="des"></div>').text(item.text), ) ); $slide.append($item); }); }); //下一张：将所有带有 .item 类的第一个元素移动到 #slide 容器的末尾。 document.querySelectorAll('.s_button')[1].onclick = () => { let lists = document.querySelectorAll('.item'); document.querySelector('#slide').appendChild(lists[0]); } //上一张：将所有带有 .item 类的最后一个元素移动到 #slide 容器的开头 document.querySelectorAll('.s_button')[0].onclick = () => { let lists = document.querySelectorAll('.item'); document.querySelector('#slide').prepend(lists[lists.length - 1]); } })

上述代码实现动态卡片生成，去主要部分还是在于点击按钮实现轮播的切换，我们来看上一张的操作：

document.querySelectorAll('.s_button')[0].onclick = () => { let lists = document.querySelectorAll('.item'); document.querySelector('#slide').prepend(lists[lists.length - 1]); }

document.querySelectorAll('.s_button')[0]：选取所有带有.s_button类的元素，并获取其中第一个元素（索引为0）。这通常对应于“上一张”按钮。
.onclick = () => { ... }：同样地，为该按钮添加一个点击事件监听器。
let lists = document.querySelectorAll('.item')：与“下一张”功能相同，选择所有带有.item类的元素，并将它们存储在变量lists中。
document.querySelector('#slide').prepend(lists[lists.length - 1])：找到ID为#slide的容器，并将最后一个.item元素（即lists[lists.length - 1]）移动到该容器的开头。这样就实现了当前显示的最后一个项目被移到最前，从而展示前一个项目。

下一张同理：

document.querySelectorAll('.s_button')[1].onclick = () => { let lists = document.querySelectorAll('.item'); document.querySelector('#slide').appendChild(lists[0]); }

document.querySelectorAll('.s_button')[1]：选取所有带有.s_button类的元素，并获取其中第二个元素（索引为1）。这通常对应于“下一张”按钮。
.onclick = () => { ... }：为该按钮添加一个点击事件监听器，当用户点击这个按钮时，执行箭头函数中的代码块。
let lists = document.querySelectorAll('.item')：选择所有带有.item类的元素，并将它们存储在变量lists中。这些元素代表轮播图中的各个项目。
document.querySelector('#slide').appendChild(lists[0])：找到ID为#slide的容器，并将第一个.item元素（即lists[0]）移动到该容器的末尾。这样就实现了当前显示的第一个项目被移到最后，从而展示下一个项目。

对于这样效果的轮播，主要还是在于轮播图样式的定义，下面是CSS完整代码

/* 重置所有元素的默认 margin 和 padding */ * { margin: 0; padding: 0; } /* 轮播图容器样式 */ .lunbo-wrap { width: 1200px; /* 设置轮播图容器的宽度为1200px */ height: 500px; /* 设置轮播图容器的高度为500px */ position: absolute; /* 使用绝对定位 */ top: 42%; /* 将顶部边缘设置为视口高度的42% */ left: 50%; /* 将左侧边缘设置为视口宽度的50% */ transform: translate(-50%, -50%); /* 使用平移变换使容器居中 */ background-color: #f5f5f5; /* 设置背景颜色为浅灰色 */ padding: 50px; /* 设置内边距为50px */ box-shadow: 0 30px 50px #dbdbdb; /* 添加阴影效果 */ } /* 轮播图滑块样式 */ #slide { width: max-content; /* 设置滑块的宽度为最大内容宽度 */ } /* 每个轮播项的通用样式 */ .item { width: 200px; /* 设置每个轮播项的宽度为200px */ height: 300px; /* 设置每个轮播项的高度为300px */ background-position: 50%, 50%; /* 设置背景图片的位置 */ display: inline-block; /* 使每个轮播项显示为行内块级元素 */ background-size: cover; /* 使背景图片覆盖整个轮播项 */ position: absolute; /* 使用绝对定位 */ top: 60%; /* 设置顶部距离为60% */ transform: translateY(-50%); /* 使用平移变换使轮播项垂直居中 */ border-radius: 20px; /* 设置圆角半径 */ box-shadow: 0 30px 50px #505050; /* 添加阴影效果 */ transition: 0.5s; /* 设置过渡效果持续时间为0.5秒 */ } /* 第一个和第二个轮播项的特殊样式 */ .item:nth-child(1), .item:nth-child(2) { top: 0; /* 设置顶部距离为0 */ left: 0; /* 设置左侧距离为0 */ width: 100%; /* 设置宽度为100% */ height: 100%; /* 设置高度为100% */ transform: translateY(0); /* 取消垂直居中 */ border-radius: 0; /* 取消圆角 */ box-shadow: none; /* 取消阴影 */ } /* 第三个轮播项的特殊位置 */ .item:nth-child(3) { left: 65%; /* 设置左侧距离为65% */ } /* 第四个轮播项的特殊位置 */ .item:nth-child(4) { left: calc(65% + 220px); /* 计算左侧距离 */ } /* 第五个轮播项的特殊位置 */ .item:nth-child(5) { left: calc(65% + 440px); /* 计算左侧距离 */ } /* 第六个轮播项的特殊位置 */ .item:nth-child(6) { left: calc(65% + 660px); /* 计算左侧距离 */ opacity: 0; /* 设置透明度为0 */ } /* 轮播项中的内容样式 */ .item .content { width: 300px; /* 设置内容宽度 */ position: absolute; /* 使用绝对定位 */ left: 100px; /* 设置左侧距离 */ top: 50%; /* 设置顶部距离 */ transform: translateY(-50%); /* 使用平移变换使内容垂直居中 */ font-family: system-ui; /* 设置字体 */ color: black; /* 设置字体颜色 */ display: none; /* 默认隐藏内容 */ } /* 第二个轮播项的内容默认显示 */ .item:nth-child(2) .content { display: block; /* 显示内容 */ } /* 轮播项中的名称样式 */ .item .name { font-size: 40px; /* 设置字体大小 */ font-weight: bold; /* 设置字体加粗 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 1 forwards; /* 定义动画效果 */ } /* 轮播项中的描述样式 */ .item .des { margin: 20px 0; /* 设置上下外边距 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 0.3s 1 forwards; /* 延迟0.3秒后显示 */ } /* 轮播项中的按钮样式 */ .item button { padding: 10px 20px; /* 设置内边距 */ border: none; /* 取消边框 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 0.6s 1 forwards; /* 延迟0.6秒后显示 */ } /* 定义动画效果，这里主要是对于图片上文字部分的动画 */ @keyframes showcontent { from { opacity: 0; /* 初始透明度为0 */ transform: translateY(100px); /* 向下移动100px */ filter: blur(20px); /* 初始模糊效果 */ } to { opacity: 1; /* 最终透明度为1 */ transform: translateY(0); /* 不再移动 */ filter: blur(0); /* 取消模糊效果 */ } } /* 控制按钮容器样式 */ .buttons { width: 100%; /* 设置宽度为100% */ position: absolute; /* 使用绝对定位 */ bottom: 50px; /* 设置底部距离 */ margin-left: -50px; /* 设置左侧外边距 */ text-align: center; /* 文本居中 */ border: none; /* 取消边框 */ } /* 单个控制按钮样式 */ .s_button { display: inline-block; /* 行内块级元素 */ border: none; /* 取消边框 */ width: 50px; /* 设置宽度 */ height: 50px; /* 设置高度 */ line-height: 50px; /* 设置行高 */ text-align: center; /* 文本居中 */ color: gray; /* 设置字体颜色 */ font-size: 25px; /* 设置字体大小 */ border-radius: 50%; /* 设置圆形 */ font-weight: bold; /* 设置字体加粗 */ border: 1px solid #555; /* 设置边框 */ margin: 0 25px; /* 设置外边距 */ transition: 0.5s; /* 设置过渡效果 */ } /* 鼠标悬停时的控制按钮样式 */ .s_button:hover { cursor: pointer; /* 更改鼠标指针 */ background-color: #ccc; /* 设置背景颜色 */ }

这里附上json文件，有需要的可以参考这个json来定义数据格式

[{ "image": "img/photo1.jpg", "photoName": "图片1", "text": "这是一串文字介绍" }, { "image": "img/photo2.jpg", "photoName": "图片2", "text": "这是一串文字介绍" }, { "image": "img/photo3.jpg", "photoName": "图片3", "text": "这是一串文字介绍" }, { "image": "img/photo4.jpg", "photoName": "图片4", "text": "这是一串文字介绍" }, { "image": "img/photo5.jpg", "photoName": "图片5", "text": "这是一串文字介绍" }, { "image": "img/photo6.jpg", "photoName": "图片6", "text": "这是一串文字介绍" } ]