<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人物介绍</title>
<style>
*{
padding: 0;
margin: 0;
}
.w{
width: 1280px;
margin: 0 auto;
}
body{
/* height: 4000px; */
background: url(imges/微信图片_20221125200537.jpg) no-repeat;
background-size: 100% ;
background-attachment: fixed;
}
a{
text-decoration: none;
color: black;
}
li{
list-style: none;
}
input{
outline: none;
}
textarea{
outline: none;
resize: none;
}
.ding1{
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 100px;
}
ul {
list-style: none;
}
#wrap {
overflow: hidden;
position: relative;
width: 1020px;
height: 580px;
margin: 0 auto 0;
}
#wrap .img-list {
display: flex;
position: relative;
left: 0px;
width: 100%;
height: 100%;
transition: 0.5s ease;
}
#wrap .img-list img {
width: 100%;
cursor: pointer;
}
#wrap a {
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: block;
width: 40px;
height: 70px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
user-select: none;
font-size: 30px;
text-align: center;
line-height: 70px;
text-decoration: none;
}
#wrap a.left {
left: 0;
}
#wrap a.right {
right: 0;
}
.circle-list {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
width: 240px;
height: 40px;
z-index: 8;
}
.circle-list > .circle {
margin: 0 5px;
width: 30px;
height: 30px;
background-color: #ecf0f1;
border-radius: 50%;
}
.circle-list > .circle.active {
background-color: #e74c3c;
}
.header h2{
position: absolute;
left: 600px;
bottom: 300px;
size: 50px;
color: red;
}
.header h3{
position:absolute;
left: 600px;
bottom: 270px;
size: 40px;
color: red;
}
.nav{
height: 80px;
background-image: url(imges/微信图片_20221201111845.jpg);
background-repeat: no-repeat;
background-color:rgba(0,0,0,.3);
}
.btli{
float: left;
padding-left: 180px;
line-height: 80px;
width: 100px;
text-align: center;
}
.navlist a{
color: #fff;
display: block;
font-size: 25px;
}
.navlist a:hover{
background: #FFA500;
}
.droplist{
padding-left:2px;
background: #333;
box-shadow: 0 1px 2px #FFA500;
display: none;
border-radius: 6px;
width: 100px;
z-index: 1;
position: absolute;
}
.droplist a{
font-size: 14px;
}
.btli:hover .droplist{
display: block;
}
.renwu{
/* height: 3000px; */
/* background-color: aquamarine; */
}
.renwu h2{
height: 40px;
margin: 20px;
text-align: center;
background-color: #00FFFF;
}
.renwu ul li{
margin: 20px auto;
height: 300px;
width: 900px;
background-image: url(imges/微信图片_20221129142528.jpg);
}
.renwu ul li img{
float: left;
width: 50%;
height: 100%;
}
.renwu ul li h3{
text-align: center;
font-size: 20px;
margin-top: 20px;
}
.renwu ul li p{
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<audio src="imges/全面战争.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="header w">
<div class="nav">
<ul class="navlist">
<li class="btli"> <a href="index.html">首页</a></li>
<li class="btli"> <a href="renwu.html">人物介绍</a></li>
<li class="btli"> <a href="#" >剧场版</a>
<ul class="droplist">
<li> <a href="hfgj.html">红发歌姬</a></li>
<li> <a href="hjd.html">黄金岛</a></li>
<li> <a href="ftd.html">发条岛</a></li>
<li> <a href="qzsj.html">强者世界</a></li>
<li> <a href="krxd.html">狂热行动</a></li>
<li> <a href="https://baike.baidu.com/item/%E8%88%AA%E6%B5%B7%E7%8E%8B%E5%89%A7%E5%9C%BA%E7%89%88/58983892">更多....</a></li>
</ul>
</li>
<li class="btli"> <a href="daixu.html">待续...</a></li>
</ul>
</div>
</div>
<div id="wrap">
<!-- 图片列表 -->
<div class="img-list">
<img src="imges\微信图片_20221126184404.jpg">
<img src="imges\微信图片_20221125200545.jpg">
<img src="imges\微信图片_20221125200555.jpg">
<img src="imges\微信图片_20221125200537.jpg">
<img src="imges\微信图片_20221125200507.jpg">
</div>
<!-- 小箭头 -->
<div class="arrow">
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
</div>
<!-- 小圆点 -->
<ul class="circle-list">
<li class="circle active" data-n="0"></li>
<li class="circle" data-n="1"></li>
<li class="circle" data-n="2"></li>
<li class="circle" data-n="3"></li>
<li class="circle" data-n="4"></li>
</ul>
</div>
<script>
// 获取左右按钮和图片列表
let oLeft = document.querySelector(".left");
let oRight = document.querySelector(".right");
let oImgList = document.querySelector(".img-list");
// 克隆第一张图片
let clonefirstImg = oImgList.firstElementChild.cloneNode();
// 将第一张图片添加至图片列表的末尾
oImgList.appendChild(clonefirstImg);
// 图片索引 代表当前是第几张图片 index:0代表第一张图片
let index = 0;
// 设置函数节流锁
let lock = true;
function handleRightBtn() {
if (!lock) return;
index++;
oImgList.style.left = index * -1020 + "px";
// 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉
oImgList.style.transition = "0.5s ease";
if (index === 5) {
index = 0;
setTimeout(() => {
oImgList.style.left = 0;
// 取消过渡 500毫秒之后切换第一张
oImgList.style.transition = "none";
}, 500);
}
// 设置小圆点的高亮
setCircles();
// 关锁
lock = false;
setTimeout(() => {
lock = true;
}, 500);
}
// 右按钮的实现
oRight.addEventListener("click", handleRightBtn);
// 左按钮的实现 瞬间切换到假图然后拉到真实最后一张图片
oLeft.addEventListener("click", () => {
if (!lock) return;
index--;
if (index === -1) {
oImgList.style.left = 5 * -1020 + "px";
oImgList.style.transition = "none";
index = 4;
setTimeout(() => {
oImgList.style.left = index * -1020 + "px";
oImgList.style.transition = "0.5s ease";
}, 0);
} else {
oImgList.style.left = index * -1020 + "px";
}
// 设置小圆点的高亮
setCircles();
lock = false;
setTimeout(() => {
lock = true;
}, 500);
});
// 获取五个小圆点
const circles = document.querySelectorAll(".circle");
// 小圆点高亮的显示
function setCircles() {
for (let i = 0; i < circles.length; i++) {
if (i === index) {
circle
9_海贼王页面设计.zip
需积分: 0 166 浏览量
2024-01-27
19:24:55
上传
评论
收藏 12.53MB ZIP 举报
9_海贼王页面设计.zip （61个子文件） 
海贼王页面设计 
jcb.html 9KB hjd.html 10KB krxd.html 11KB daixu.html 11KB hfgj.html 11KB index.html 11KB imges 
微信图片_20221201105737.jpg 174KB
红发歌姬1.png 113KB 微信图片_20221201111845.jpg 11KB 微信图片_20221125200545.jpg 176KB 狂热行动.jpg 393KB 微信图片_20221125202408.jpg 318KB 微信图片_20221206194136.jpg 120KB 海米3.png 178KB 微信图片_20221210111917.jpg 95KB
全面战争.mp3 739KB 微信图片_20221125202353.jpg 324KB 微信图片_20221125200525.jpg 172KB 红发歌姬6.png 131KB 微信图片_20221201105908.jpg 244KB 海米4.png 135KB 微信图片_20221206191812.jpg 158KB 微信图片_20221126184404.jpg 283KB
bj40150419.gif 184KB dong1.jpg 657KB 微信图片_20221210110844.png 389KB 红发歌姬3.png 124KB 微信图片_20221210112349.jpg 124KB 微信图片_20221125200537.jpg 209KB 红发歌姬5.png 92KB xinshidai.mp3 3.48MB 微信图片_20221125202348.jpg 62KB 红发歌姬7.png 148KB 微信图片_20221201110055.jpg 198KB 海米1.png 126KB 红发歌姬4.png 120KB 红发歌姬9.png 149KB 微信图片_20221125200555.jpg 195KB 微信图片_20221125202357.jpg 119KB 微信图片_20221210112724.jpg 87KB 微信图片_20221125202402.jpg 164KB 微信图片_20221125200507.jpg 126KB 红发歌姬.jpg 69KB 微信图片_20221129142528.jpg 166KB 海米5.png 51KB 微信图片_20221125200549.jpg 212KB 红发歌姬2.png 156KB 微信图片_20221211130516.jpg 147KB 红发歌姬8.png 137KB 黄金岛.jpg 109KB 海米2.png 136KB 海米9.png 127KB 强者世界.jpg 102KB 发条岛.jpg 283KB 海米6.png 131KB 微信图片_20221126120610.jpg 208KB 海米7.png 175KB 海米8.png 101KB renwu.html 14KB ftd.html 11KB qzsj.html 11KB资源评论
友616
- 粉丝: 1
- 资源: 1
