AkiRikka · xyxy24 · Nov 21, 2024
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/fantasy-ex1.iml b/.idea/fantasy-ex1.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/assets/宇多田ヒカル - One Last Kiss.mp3 b/assets/宇多田ヒカル - One Last Kiss.mp3
diff --git a/assets/微信图片_20241004224815.jpg b/assets/微信图片_20241004224815.jpg
diff --git a/assets/微信图片_20241120154839.jpg b/assets/微信图片_20241120154839.jpg
diff --git a/assets/微信图片_20241120154857.jpg b/assets/微信图片_20241120154857.jpg
diff --git a/assets/微信图片_20241120154900.jpg b/assets/微信图片_20241120154900.jpg
diff --git a/assets/微信图片_20241120154903.jpg b/assets/微信图片_20241120154903.jpg
diff --git a/src/.vs/slnx.sqlite b/src/.vs/slnx.sqlite
diff --git a/src/main-page.html b/src/main-page.html
@@ -2,7 +2,6 @@
 aaaaaaaa
 <html>
     <ody>
-        请修改我！！！！！
     </ody>
 </html>
 

diff --git a/src/script.js b/src/script.js
@@ -0,0 +1,52 @@
+let left = document.querySelector(".button-left")
+    let right = document.querySelector(".button-right")
+    let min = document.querySelectorAll(".min")
+    let images = document.querySelector(".images")
+    let index = 0
+    let time
+    function position() {
+        images.style.left = (index * -100) + "%"
+    }
+    function add() {
+        if (index >= min.length-1) {
+            index = 0
+        } else {
+            index++
+        }
+    }
+    function desc() {
+        if (index < 1) {
+            index = min.length-1
+        } else {
+            index--
+        }
+    }
+    function timer(){
+        time = setInterval(() => {
+            index++
+            desc()
+            add()
+            position()
+        }, 3000)
+    }
+    left.addEventListener("click", () => {
+        desc()
+        position()
+        clearInterval(time)
+        timer()
+    })
+    right.addEventListener("click", () => {
+        add()
+        position()
+        clearInterval(time)
+        timer()
+    })
+    for (let i = 0; i < min.length; i++) {
+        min[i].addEventListener("click", () => {
+            index = i
+            position()
+            clearInterval(time)
+            timer()
+        })
+    }
+    timer()
diff --git a/src/src/style.css b/src/src/style.css
@@ -0,0 +1,144 @@
+
+*{
+    padding: 0;
+    margin: 0;
+    font-family: "楷体";
+}
+
+ul{
+    float: right;
+    list-style-type: none;
+    margin: 15px;
+    position: relative; 
+    left: 1000px;
+    top:-480px;
+}
+ul li{
+    display: inline-block;
+}
+
+ul li a{
+    text-decoration: none;
+    color: #fff;
+    padding: 5px 20px;
+    border: 1px solid transparent;
+    transition: .6s ease;
+    border-radius: 20px;
+}
+
+ul li a:hover{
+    background-color: #fff;
+    color: #000;
+}
+ul li.active a{
+    background-color: #fff;
+    color: #000;
+}
+.title{
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+.title h1{
+    color: #fff;
+    font-size: 70px;
+    font-family: Century Gothic;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient(to right, rgba(240,203,195, 0.1), rgba(173,159,212, 0.2)) ,url("../../assets/微信图片_20241004224815.jpg");
+    height: 100vh;
+    background-size: cover;
+    background-position: center;
+}
+
+.shell {
+    width: 400px;
+    height: 400px;
+    position: relative;
+    left: -900px;
+    top: 250px;
+    overflow: hidden;
+    border-radius: 5px;
+    border: 10px #fff solid;
+    box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
+}
+
+.images {
+    width: 400%;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    left: 0;
+    transition: .2s;
+}
+
+.img{
+    width: 100%;
+    background-size: cover;
+}
+.img:nth-child(1){
+    background-image: url("../../assets/微信图片_20241120154839.jpg");
+}
+.img:nth-child(2){
+    background-image: url("../../assets/微信图片_20241120154857.jpg");
+}
+.img:nth-child(3){
+    background-image: url("../../assets/微信图片_20241120154900.jpg");
+}
+.img:nth-child(4){
+    background-image: url("../../assets/微信图片_20241120154903.jpg");
+}
+
+.min-images {
+    display: flex;
+    justify-content: space-evenly;
+    position: absolute;
+    bottom: 20px;
+    width: 40%;
+    z-index: 999;
+    right: 10%;
+}
+
+.min{
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-size: cover;
+    border: solid rgba(255, 255, 255, 0.5) 5px;
+    background-position: -20px 0;
+}
+.min:nth-child(1){
+    background-image: url("../../assets/微信图片_20241120154839.jpg");
+}
+.min:nth-child(2){
+    background-image: url("../../assets/微信图片_20241120154857.jpg");
+}
+.min:nth-child(3){
+    background-image: url("../../assets/微信图片_20241120154900.jpg");
+}
+.min:nth-child(4){
+    background-image: url("../../assets/微信图片_20241120154903.jpg");
+}
+
+
+.button {
+    width: 100%;
+    height: 100%;
+    position:absolute;
+    display: flex;
+    justify-content: space-between;
+    user-select:none;
+}
+
+.button-left,
+.button-right {
+    font-size: 50px;
+    padding: 0 20px;
+    cursor: pointer;
+    line-height: 500px;
+}
diff --git a/src/首页.html b/src/首页.html
@@ -0,0 +1,50 @@
+<!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>首页</title>
+    <link rel="stylesheet" type="text/css" href="src\style.css">
+</head>
+<body>
+
+    <header>
+        <h1></h1>
+    </header>
+        <div class="main">
+            <ul>
+                <li class="active"><a href="#" style="color:blueviolet">首页</a></li>
+                <li><a href="https://www.bilibili.com/video/BV1Ux411W79m/?spm_id_from=333.337.search-card.all.click&vd_source=fedf1f54fec00798229cd35e56e65f97" target="_blank" style="color:blueviolet">网页游戏</a></li>
+                <li><a href="https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click&vd_source=fedf1f54fec00798229cd35e56e65f97" target="_blank" style="color:blueviolet">纳新系统</a></li>
+                <li><a href="https://www.bilibili.com/video/BV1L4421S7Kr/?spm_id_from=333.337.search-card.all.click&vd_source=fedf1f54fec00798229cd35e56e65f97" target="_blank" style="color:blueviolet"><span style="color: crimson;">作品</span>展示</a></li>
+
+            </ul>
+        </div>
+        <div class="shell">
+            <ui class="images">
+                <li class="img"></li>
+                <li class="img"></li>
+                <li class="img"></li>
+                <li class="img"></li>
+            </ui>
+                <ui class="min-images">
+                    <li class="min"></li>
+                    <li class="min"></li>
+                    <li class="min"></li>
+                    <li class="min"></li>
+                </ui>
+            <div class="button">
+                <div class="button-left"><</div>
+                <div class="button-right">></div>
+            </div>
+        </div>
+        <div class="title">
+            <h1><span style="color: crimson;"></span> </h1>
+        </div>
+        <script src="script.js"></script>
+        <audio id="music1" controls="controls" autoplay="autoplay" preload="auto" hidden>
+            <source src="../assets/宇多田ヒカル - One Last Kiss.mp3" />
+            </audio>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ @@
     aaaaaaaa
     <html>
         <ody>
-            请修改我！！！！！
         </ody>
     </html>
@@ Expand Down @@