前端的页面代码 | 失之一灵

根据老师教的前端页面的知识，加上我也是借鉴了老师上课所说的代码，马马虎虎的写出了页面。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset_css.css">
    <link rel="stylesheet" href="./css/data_css.css">
</head>
<body>
<div class="box">
    <div class="img1">
        <ul>
            <li><img style="z-index: 1" src="./images/大图1.webp" alt=""></li>
            <li><img src="./images/大图2.webp" alt=""></li>
            <li><img src="./images/大图3.webp" alt=""></li>
            <li><img src="./images/大图4.webp" alt=""></li>
        </ul>
    </div>
    <div class="img2">
        <ul>
            <li><img style="z-index: 11" src="./images/小图1.webp" alt=""></li>
            <li><img src="./images/小图2.webp" alt=""></li>
            <li><img src="./images/小图3.webp" alt=""></li>
            <li><img src="./images/小图4.webp" alt=""></li>
        </ul>
    </div>
    <div class="btn">
        <ul id="l1">
            <li><img style="z-index: 11" class="img1" src="./images/按钮左1.webp" alt=""></li>
            <li><img class="img1" src="./images/按钮左2.webp" alt=""></li>
            <li><img class="img1" src="./images/按钮左3.webp" alt=""></li>
            <li><img class="img1" src="./images/按钮左4.webp" alt=""></li>
        </ul>
        <ul id="l2">
            <li><img style="z-index: 11" class="img2" src="./images/按钮右1.webp" alt=""></li>
            <li><img class="img2" src="./images/按钮右2.webp" alt=""></li>
            <li><img class="img2" src="./images/按钮右3.webp" alt=""></li>
            <li><img class="img2" src="./images/按钮右4.webp" alt=""></li>
        </ul>
    </div>
    <div class="cir">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>
<script src="./js/date.js"></script>
</body>
</html>

运行此代码时，还需要联合css和js代码。

js代码如下：

var img=document.querySelectorAll(".box .img1 li img")
var img1=document.querySelectorAll(".box .img2 li img")
var cir=document.querySelectorAll(".box .cir li")
var btn=document.querySelectorAll(".box .btn .img1")
var btn1=document.querySelectorAll(".box .btn .img2")

function f1(i) {
    for (let j=0;j<cir.length;j++){
            img[j].setAttribute("style", "z-index:0")
        img1[j].setAttribute("style", "z-index:0")
            btn[j].setAttribute("style", "z-index:0")
        btn1[j].setAttribute("style", "z-index:0")
        }
        img[i].setAttribute("style", "z-index:"+(i+1))
        img1[i].setAttribute("style", "z-index:"+(i+11))
        btn[i].setAttribute("style", "z-index:"+(i+11))
        btn1[i].setAttribute("style", "z-index:"+(i+11))
}

for (let i=0;i<cir.length;i++){
    cir[i].onclick=function () {
        f1(i)
        index=i
    }
}

var l1=document.getElementById("l1")
var l2=document.getElementById("l2")
var index=0
l2.onclick=function () {
    if (index == img.length-1){
        index=0
    }else{
        index++
    }f1(index)
}

l1.onclick=function () {
    if (index == 0){
        index=img.length-1
    }else{
        index--
    }f1(index)
}

css代码如下：

1)data文件代码

.box{
    width: 1800px;
    height: 800px;
    margin: 20px auto;
    position: relative;
    left: 0;
    top: 0;
}
.box .img1 img{
    width: 1800px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
}
.box .img2 img{
    width: 700px;
    height: 350px;
    position: absolute;
    top: 30%;
    left: 30%;
    margin-top: -50px;
    margin-left: 15px;
}
.box .btn .img1{
    width: 75px;
    height: 75px;
    position: absolute;
    top: 50%;
    left: 20%;
    margin-left: 80px;
    margin-top: -75px;
}
.box .btn .img2{
    width: 75px;
    height: 75px;
    position: absolute;
    top: 50%;
    right: 20%;
    margin-right: 80px;
    margin-top: -75px;
}
.box .cir ul{
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translateX(-50px);
    margin-left: -10px;
    z-index: 50;
}
.box .cir li{
    width: 10px;
    height: 10px;
    background-color: forestgreen;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    border: forestgreen solid 5px;
}
.box .cir li:hover{
    background-color: dimgray;
}
.box .btf #img3{
    position: absolute;
    bottom: 5%;
    left: 30%;
    margin-left: 40px;
    margin-bottom: 5px;
    z-index: 50;
}
.box .btf #img4{
    position: absolute;
    bottom: 5%;
    left: 40%;
    margin-left: 20px;
    margin-bottom: 5px;
    z-index: 50;
}
.box .btf #img5{
    position: absolute;
    bottom: 5%;
    left: 50%;
    margin-left: 35px;
    margin-bottom: 5px;
    z-index: 50;
}
.box .btf #img6{
    position: absolute;
    bottom: 5%;
    right: 30%;
    margin-right: 40px;
    margin-bottom: 5px;
    z-index: 50;
}

2）reset文件代码

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

结合上述前端代码，运行如下：

前端的页面代码-LMLPHP

在此是用老师发送原神图片练习的。