<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1
.0">
<title>Document</title>
<style>
.slider{
width: 580px;
height: 408px;
overflow: hidden;
border-radius: 5px;
}
.slider-wrapper{
position: relative;
width: 100%;
height: 326
.25px;
background-image: url("
./1
.avif");
background-size: cover;
}
.slider-wrapper
.conter{
position: absolute;
bottom: -50px;
left: -50px;
width: 120%;
height: 30%;
background: #14273e;
filter: blur(20px);
}
.slider-footer{
position: relative;
height: 81
.75px;
background-color: #14273e;
padding: 12px 12px 0 12px;
}
.slider-footer p{
color:#fff;
font-size: 18px;
margin: 0;
margin-bottom: 10px;
}
.slider-indicator{
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.slider-indicator li{
width: 8px;
height: 8px;
margin: 4px;
background: #fff;
border-radius: 50%;
opacity: 0
.4;
cursor: pointer;
}
.slider-indicator li
.active{
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<div class="conter"></div>
</div>
<div class="slider-footer">
<p>生死一线，噬极兽群突袭龙骨村！</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
const sliderDate = [
{url:'1
.avif',title:'生死一线，噬极兽群突袭龙骨村！',color:'#14273e'},
{url:'2
.avif',title:'《碧蓝航线》8周年庆典换装限时上线！',color:'#716156'},
{url:'3
.avif',title:'我这么可爱，你怎么忍心不约？',color:'#dc8661'},
{url:'4
.avif',title:'【毕业vlog】从哥伦比亚大学毕业啦！',color:'#353451'},
{url:'5
.avif',title:'投稿音乐4K内容瓜分万元奖金！',color:'#8e98f7'},
{url:'6
.avif',title:'速来一起解锁更多前沿科技知识！',color:'#283940'},
{url:'7
.avif',title:'名校毕业当服务员被家人骂
活该',color:'#00030c'},
{url:'8
.avif',title:'有个爱记录你的男朋友，生活会是什么样',color:'#413327'},
{url:'9
.avif',title:'周深谏言毕业生多尝试！6月2日现场见！',color:'#597083'},
]
// 获取页面元素
const bgimg = document
.querySelector('
.slider-wrapper')
const conter = document
.querySelector('
.slider-wrapper
.conter')
const footer = document
.querySelector('
.slider-footer')
const p = document
.querySelector('
.slider-footer p')
const li = document
.querySelectorAll('
.slider-indicator li')
let i = 0
setInterval(function(){
li[i]
.classList
.remove('active')
i++
if (i >= sliderDate
.length) {
i = 0
}
bgimg
.style
.backgroundImage = `url("
./${sliderDate[i]
.url}")`
conter
.style
.background = sliderDate[i]
.color
footer
.style
.backgroundColor = sliderDate[i]
.color
p
.innerHTML = sliderDate[i]
.title
li[i]
.classList
.add('active')
},2000)
</script>
</body>
</html>
一位男士希望找一个可爱的女孩作为女友，但每位被询问的人都有自己的高标准，导致最终无人配对成功。
扫一扫
1414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
