<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
<section class="role">
<ul class="swiper">
<li class="card">
<img src="./assets/1.webp" alt="">
</li>
<li class="card">
<img src="./assets/2.webp" alt="">
</li>
<li class="card">
<img src="./assets/3.webp" alt="">
</li>
<li class="card">
<img src="./assets/4.webp" alt="">
</li>
</ul>
<div class="bottom">
<div class="playbtn"></div>
<ul class="song">
<img class="zh" src="./assets/zh.png" alt="">
<img class="jp" src="./assets/jp.png" alt="">
<!-- <audio class="a_zh" src="./assets/zh.mp3"></audio>
<audio class="a_jp" src="./assets/jp.mp3"></audio> -->
</ul>
<!-- .swiper li.card img -->
<ul class="control">
<button class="prev"></button>
<div class="dots">
<div class="dd"></div>
<!-- <img src="./assets/dot-b.png" width="14" alt=""> -->
</div>
<!-- 0 23 46 69 => current*23 -->
<button class="next"></button>
</ul>
</div>
<div class="mask">
<video src="./assets/section1-video.mp4" controls></video>
</div>
</section>
<!-- <video src="./assets/video.mp4" width="100%" controls></video> -->
<style>
body {
margin: 0;
background-color: rgb(37, 37, 37);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
section.role {
position: relative;
}
section.role .swiper li {
width: 100%;
color: white;
display: none;
/* 隐藏 */
}
section.role .swiper li:nth-child(1) {
display: block;
/* 显示 */
}
/* 有空格代表后代元素 */
section.role .swiper li.card img {
width: 100%;
}
section.role .bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/* */
section.role .song {
display: flex;
}
section.role .song img {
width: 38%;
}
section.role .song img.zh {
margin: 0 3% 0 9%;
}
section.role .song img.jp {
margin: 0 9% 0 3%;
}
/* */
section.role .control {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
section.role .control button {
width: 15px;
height: 22px;
/* background-color: lightblue; */
background-repeat: no-repeat;
background-size: cover;
border: none;
background-color: transparent;
}
section.role .control .prev {
background-image: url("assets/left.png");
}
section.role .control .next {
background-image: url("assets/right.png");
}
section.role .control .dots {
width: 83px;
height: 14px;
background-image: url("./assets/dot-bg.png");
background-size: auto 14px;
background-position: left center;
/* background-color: lightblue; */
margin: 0 10px;
}
section.role .control .dots .dd {
width: 14px;
height: 14px;
/* background-color: red; */
background-image: url("./assets/dot-b.png");
background-size: cover;
}
</style>
<style>
section.role .playbtn {
width: 24px;
height: 24px;
/* background-color: green; */
background-image: url("./assets/video-play.png");
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 125px;
margin-left: 33vw;
}
section.role .mask {
background-color: rgba(0, 0, 0, 0.581);
width: 100vw;
height: 100vh;
/* vw屏幕宽度 vh屏幕高度 分成100份 */
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
/* 初始隐藏 */
display: none;
}
section.role .mask video {
width: 100vw;
height: 56.25vw;
}
</style>
<script>
var section01_current = 0
// 初始的时候让current高亮
var section01_dd = document.querySelector(".control .dots .dd")
// querySelector 选择第一个匹配的元素
document.querySelector("section.role .control .next").onclick = function () {
console.log(section01_current, '下一个');
// 先把当前隐藏
document.querySelectorAll("section.role .swiper .card")[section01_current].style.display = 'none'
// 改变当前索引
section01_current += 1
if (section01_current > 3) {
section01_current = 0
}
// 需要判断 不能超过3
document.querySelectorAll("section.role .swiper .card")[section01_current].style.display = 'block'
section01_dd.style.marginLeft = section01_current * 22 + 'px';
}
// querySelectorAll 选择所有匹配的元素
// document.querySelectorAll(".swiper .card")
document.querySelector(".control .prev").onclick = function () {
document.querySelectorAll("section.role .swiper .card")[section01_current].style.display = 'none'
section01_current -= 1
if (section01_current < 0) {
section01_current = 3
}
console.log(section01_current);
document.querySelectorAll("section.role .swiper .card")[section01_current].style.display = 'block'
section01_dd.style.marginLeft = section01_current * 22 + 'px';
}
// 点击播放音频zh
document.querySelector('section.role .song img.zh').onclick = function () {
// 选中一个音乐元素 .play()播放 pasue() 暂停
// document.querySelector(".song audio.a_zh").play()
// 移除上一次创建的audio
if (document.querySelector('section.role audio')) {
document.body.removeChild(document.querySelector('section.role audio'))
}
// 创建音频文件
var dom = document.createElement("audio")
// 修改路径
dom.src = "./assets/zh.mp3"
// 插入文档
document.body.appendChild(dom)
dom.play()
}
document.querySelector('section.role .song img.jp').onclick = function () {
// 选中一个音乐元素 .play()播放 pasue() 暂停
// document.querySelector(".song audio.a_jp").play()
// 移除上一次创建的audio
if (document.querySelector('section.role audio')) {
document.body.removeChild(document.querySelector('section.ro
ys-0524.zip （88个子文件） 
ys-0524 
03-section02 copy.html 3KB
03-style.css 5KB 07 style.css 9KB project.html 8KB minireset.css 725B script.js 6KB 00.html 1KB assets 
jp.png 31KB 02-left.png 4KB
02-video-01.mp4 16.53MB jp.mp3 228KB 04-全新怪物 mxdj-text.webp 3KB mxdj-video.mp4 13.94MB mxdj-text-active.webp 4KB mxdj-bg.webp 31KB qxgw-bg-.webp 9KB pr-bg.webp 27KB pr-text.webp 2KB pr-video.mp4 12.48MB pr-text-active.webp 3KB 02-swiper-03.png 267KB banner.png 1.5MB main-bg.png 3.55MB 02-swiper-02.png 275KB 02-video-bg.webp 49KB banner03.png 24KB 02-right.png 4KB section1-video.mp4 63.11MB 02-swiper-01.png 266KB age.png 8KB 03-全新地块 nstyq-text-active.webp 4KB jrzh-video.mp4 14.72MB qxdk-bg-1.webp 14KB jrzh-text-active.webp 3KB nstyq-text.webp 3KB nstyq-video.mp4 11.23MB qxdk-bg-2.webp 15KB jrzh-text.webp 3KB video-play.png 4KB left.png 2KB banner01.png 22KB 3.webp 331KB video.mp4 16.53MB banner02.png 22KB 03-video-01.mp4 11.23MB zh.png 31KB 4.webp 398KB 2.webp 332KB top1.png 18KB right.png 2KB 02-mask-bg.png 247KB zh.mp3 117KB dot-b.png 732B 05 bg3.webp 79KB c3_active.webp 5KB c4.webp 3KB c1.webp 4KB c3.webp 4KB bg1.webp 57KB c2.webp 4KB c2_active.webp 4KB bg4.webp 53KB c1_active.webp 4KB c4_active.webp 4KB bg2.webp 78KB banner-desc.png 265KB dot-bg.png 3KB 1.webp 378KB videoframe_6646.png 38KB 04-video-01.mp4 13.94MB 04-style.css 6KB minireset.css 725B 01-轮播图.html 4KB 03-script.js 3KB 04-script.js 3KB 03-project.html 6KB 03-section02.html 3KB 04-project.html 5KB 02-header.html 2KB 01-section01.html 9KB 06 style.css 8KB project.html 7KB minireset.css 725B script.js 6KB 05 04-style.css 6KB minireset.css 725B 04-script.js 3KB 04-project.html 5KB资源评论
2301_76668438
- 粉丝: 0
- 资源: 1
最新资源
- 计算机毕业设计-基于Python+Django的个性化餐饮管理系统(源码+运行教程+讲解+演示视频).zip
- 使用 Win32 和 COM API 以 C++ 编写桌面程序
- 数据库分区技术详解：原理、实践与性能优化
- 肥胖风险分析数据集文件
- 计算机毕业设计-基于Python+Django的花卉商城系统(源码+运行教程+讲解+演示视频).rar
- 基于python3 + django3 + mysql8 + redis + uwsgi + nginx 实现的多主题博客系统
- 二分法：数学与计算机领域的利器 pdf
- 计算机毕业设计-基于Python+Django的二手电子设备交易平台(源码+运行教程+讲解+演示视频).zip
- 点云深度学习算法概述及其应用进展
- 睡眠质量记录数据集.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
