一、作品介绍
- 该项目主要使用div进行模块布局，CSS进行渲染页面，Js进行交互，共5个网页。
- 项目使用到的程序待会进行说明，尤其JS部分。
二、作品展示
视频部分
鬼灭之刃
截图部分
此界面为JS完成旋转相册效果，开启自动播放主题曲，每张图片点击跳转相应网页。
该界面为主界面，JS完成轮播图设计，主题曲一栏使用了动画旋转效果，且通过JS完成点击播放并显示音频控件，其他部分均为锚点链接，点击跳转网页人物位置。
蓝色字体跳转相关音频
三、项目文件
四、代码详情
主页面
<!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="css/index.css">
</head>
<body>
<div class="box">
<div class="head">
<img src="课设图片/logo.png" width="65px" height="53px" alt="">
<span class="title1">鬼灭</span><span class="title2">之刃</span>
<form action="">
<input type="text" style="width:100px;height:30px;margin-top:10px;">
<button style="margin-left: -5px; margin-right: 2px;transform: translate(0,3px);height:33px;background-color: #40b71c;font: 700 16px '微软雅黑';color: #fff;border: none;">搜索</button>
</form>
</div>
<div class="nav" id="shouye">
<ul>
<a href="#shouye">
<li>首页</li>
</a>
<li class="first">
人物
<div class="sub-nav"><a href="#jiesao">人物概览</a><a href="人物详情.html">人物详情</a></div>
</li>
<a href="#zhutiqu">
<li>主题曲</li>
</a>
<li>更多
<div class="sub-nav">
<a href="柱.html" target="_blank">柱概览</a>
<a href="上弦.html" target="_blank">上弦概览</a>
<a href="鬼灭之刃/index.html" onclick="playAudio()" target="_blank">结尾</a>
</div>
</li>
</ul>
</div>
<!-- 轮播图 -->
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="课设图片/总图.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="课设图片/合照.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="课设图片/总图1.jpg" alt="">
</div>
</div>
<button class="carousel-control prev" onclick="prevSlide()">❮</button>
<button class="carousel-control next" onclick="nextSlide()">❯</button>
</div>
<!-- <div><img src="课设图片/总图.jpg" alt="" width="1000px"></div> -->
<div class="content">
<!-- 人物介绍 -->
<p class="jiesao" id="jiesao">人物概览</p>
<ul>
<a href="人物详情.html#heisimou" target="_blank">
<li class="sangxian1"><span>黑死牟</span></li>
</a>
<a href="人物详情.html#tanzhilang" target="_blank">
<li class="tanzhilang"><span>炭治郎</span></li>
</a>
<a href="人物详情.html#yanzhu" target="_blank">
<li class="yanzhu"><span style="margin-left: 10px;">炎柱</span></li>
</a>
<a href="人物详情.html#wucan" target="_blank">
<li class="wucan"><span style="margin-left: 10px;">无惨</span></li>
</a>
<a href="人物详情.html#yuanyi" target="_blank">
<li class="jiguoyuanyi"><span style="margin-left: -10px;">继国缘一</span></li>
</a>
<a href="人物详情.html#yizhizhu" target="_blank">
<li class="yizhizhu"><span>伊之助</span></li>
</a>
<a href="人物详情.html#sanyi" target="_blank">
<li class="shanyi"><span style="margin-left: 10px;">善逸</span></li>
</a>
<a href="人物详情.html#canwufu" target="_blank">
<li class="canwufu"><span style="margin-left: -30px;">产屋敷辉利哉</span></li>
</a>
</ul>
<!-- 主题曲 -->
<p class="zhutiqu" id="zhutiqu">主题曲</p>
<h2 style="color: rgb(206, 63, 20); font:italic 700 30px '楷体';">紅蓮華</h2>
<div class="theme"><img class="donghua" src="课设图片/主题曲.png" title="点击播放"> <img src="课设图片/播放.png" onclick="playAudio()" class="play">
<audio id="audioPlayer" src="课设图片/鬼灭之刃.mp3" controls class="yinping" style="display: none;"></audio>
<p class="introduction">《红莲华》是LiSA演唱的歌曲，由LiSA作词、草野华余子作曲、江口亮编曲，于2019年4月22日通过索尼音乐在网络上先行发布；后收录于2019年7月3日LiSA发行的单曲碟《红莲华》中 ；而在2020年10月14日LiSA发行的个人第五张录音室专辑《LEO-NiNE》中也收录了该曲 。
2020年，该曲获得第34届日本金唱片大奖“五大下载歌曲（日本音乐）”奖 ；并在次年，该曲获得了JASRAC奖“金奖”。
</p>
</div>
</div>
</div>
<script> // 轮播图
let currentIndex = 0;
function showSlide(index) {
const slides = document.querySelectorAll('.carousel-item');
if (index >= slides.length) {
currentIndex = 0;
} else if (index < 0) {
currentIndex = slides.length - 1;
} else {
currentIndex = index;
}
const newTransformValue = `translateX(-${currentIndex * 100}%)`;
document.querySelector('.carousel-inner').style.transform = newTransformValue;
}
function nextSlide() {
showSlide(currentIndex + 1);
}
function prevSlide() {
showSlide(currentIndex - 1);
}
// 自动轮播
setInterval(() => {
nextSlide();
}, 3000);
// 自动播放主题曲
function playAudio() {
let audio = document.getElementById('audioPlayer');
audio.play();
audio.style.display = "block";
}</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
