HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏轮播</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 第一页 -->
<div class="slide current">
<div class="content">
<h1>第一页</h1>
<p>内容ing</p>
</div>
</div>
<!-- 第二页 -->
<div class="slide">
<div class="content">
<h1>第二页</h1>
<p>内容ing</p>
</div>
</div>
<!-- 第三页 -->
<div class="slide">
<div class="content">
<h1>第三页</h1>
<p>内容ed</p>
</div>
</div>
<!-- 第四页 -->
<div class="slide">
<div class="content">
<h1>第四页</h1>
<p>内容ing</p>
</div>
</div>
<!-- 第五页 -->
<div class="slide">
<div class="content">
<h1>第五页</h1>
<p>内容ing</p>
</div>
</div>
<!-- 第六页 -->
<div class="slide">
<div class="content">
<h1>第六页</h1>
<p>内容ing</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</body>
<script src="script.js"></script>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
line-height: 1.6;
color: white;
}
/* 容器 */
.container{
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
/* */
.slide{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity: 1;
}
/* 图片设置 */
.slide:first-child{
background: url('./imgs/one.jpg') no-repeat center center/cover;
}
.slide:nth-child(2){
background: url('./imgs/two.jpg') no-repeat center center/cover;
}
.slide:nth-child(3){
background: url('./imgs/three.jpg') no-repeat center center/cover;
}
.slide:nth-child(4){
background: url('./imgs/four.jpg') no-repeat center center/cover;
}
.slide:nth-child(5){
background: url('./imgs/five.jpg') no-repeat center center/cover;
}
.slide:nth-child(6){
background: url('./imgs/six.jpg') no-repeat center center/cover;
}
/* 文本框 */
.slide .content{
position: absolute;
bottom: 70px;
width: 600px;
opacity: 0;
background: rgba(255,255, 255, 0.8);
color: black;
padding: 35px;
}
.slide .content h1{
margin-bottom: 10px;
}
/* 过渡和转换好像不大行 所以我采用动画*/
.slide.current .content{
opacity: 1;
animation-name: contents;
animation-duration: 2s;
}
/* 动画 */
@keyframes contents {
from{
opacity: 0;
transform: translateX(-600px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
.buttons button#prev{
position: absolute;
top: 50%;
left: 15px;
}
.buttons button#next{
position: absolute;
top: 50%;
right: 15px;
}
.buttons button{
border: 1px solid #fff;
color: #fff;
background-color: transparent;
padding: 13px 15px;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.buttons button:hover{
background-color: #fff;
color: black;
}
/* 媒体要求*/
/* @media(max-width:500px) {
内容样式设置
} */
JS:
//get slide_arrary
const slide = document.querySelectorAll('.slide')
//get button prev
const prev = document.querySelector('#prev')
//get button next
const next = document.querySelector("#next")
const nextSlide = ()=>{
const current = document.querySelector(".current")
// 如果有下一个兄弟元素,就添加一个current 样式
if(current.nextElementSibling){
current.nextElementSibling.classList.add('current')
}else{
// 给最开始的添加current 样式
slide[0].classList.add('current')
}
// 清除当前current 样式
setTimeout(()=>{
current.classList.remove('current')
})
}
//
const prevSlide = ()=>{
const current = document.querySelector(".current")
// 如果有上一个兄弟元素,就添加一个current 样式
if(current.previousElementSibling){
current.previousElementSibling.classList.add('current')
}else{
// 给最后一个的添加current 样式
slide[slide.length-1].classList.add('current')
}
// 清除当前current 样式
setTimeout(()=>{
current.classList.remove('current')
})
}
// 下一个
next.addEventListener('click',()=>{
nextSlide()
})
//上一个
prev.addEventListener('click',()=>{
prevSlide()
})
/* 媒体要求*/
效果图:
代码中图片和图标资源网址:
图片: https://www.pexels.com/zh-cn/
参考自B站教程:https://www.bilibili.com/video/BV1Yr4y1P7hS?p=59&vd_source=960f30f38637bbff86751cdb48ca3a0d