• 前端的页面代码

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="./css/reset_css.css">
    7.     <link rel="stylesheet" href="./css/data_css.css">
    8. head>
    9. <body>
    10. <div class="box">
    11.     <div class="img1">
    12.         <ul>
    13.             <li><img style="z-index: 1" src="./images/大图1.webp" alt="">li>
    14.             <li><img src="./images/大图2.webp" alt="">li>
    15.             <li><img src="./images/大图3.webp" alt="">li>
    16.             <li><img src="./images/大图4.webp" alt="">li>
    17.         ul>
    18.     div>
    19.     <div class="img2">
    20.         <ul>
    21.             <li><img style="z-index: 11" src="./images/小图1.webp" alt="">li>
    22.             <li><img src="./images/小图2.webp" alt="">li>
    23.             <li><img src="./images/小图3.webp" alt="">li>
    24.             <li><img src="./images/小图4.webp" alt="">li>
    25.         ul>
    26.     div>
    27.     <div class="btn">
    28.         <ul id="l1">
    29.             <li><img style="z-index: 11" class="img1" src="./images/按钮左1.webp" alt="">li>
    30.             <li><img class="img1" src="./images/按钮左2.webp" alt="">li>
    31.             <li><img class="img1" src="./images/按钮左3.webp" alt="">li>
    32.             <li><img class="img1" src="./images/按钮左4.webp" alt="">li>
    33.         ul>
    34.         <ul id="l2">
    35.             <li><img style="z-index: 11" class="img2" src="./images/按钮右1.webp" alt="">li>
    36.             <li><img class="img2" src="./images/按钮右2.webp" alt="">li>
    37.             <li><img class="img2" src="./images/按钮右3.webp" alt="">li>
    38.             <li><img class="img2" src="./images/按钮右4.webp" alt="">li>
    39.         ul>
    40.     div>
    41.     <div class="cir">
    42.         <ul>
    43.             <li>li>
    44.             <li>li>
    45.             <li>li>
    46.             <li>li>
    47.         ul>
    48.     div>
    49.  
    50. div>
    51. <script src="./js/date.js">script>
    52. body>
    53. html>

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

            js代码如下：

    1. var img=document.querySelectorAll(".box .img1 li img")
    2. var img1=document.querySelectorAll(".box .img2 li img")
    3. var cir=document.querySelectorAll(".box .cir li")
    4. var btn=document.querySelectorAll(".box .btn .img1")
    5. var btn1=document.querySelectorAll(".box .btn .img2")
    6.  
    7. function f1(i) {
    8.     for (let j=0;j
    9.             img[j].setAttribute("style", "z-index:0")
    10.         img1[j].setAttribute("style", "z-index:0")
    11.             btn[j].setAttribute("style", "z-index:0")
    12.         btn1[j].setAttribute("style", "z-index:0")
    13.         }
    14.         img[i].setAttribute("style", "z-index:"+(i+1))
    15.         img1[i].setAttribute("style", "z-index:"+(i+11))
    16.         btn[i].setAttribute("style", "z-index:"+(i+11))
    17.         btn1[i].setAttribute("style", "z-index:"+(i+11))
    18. }
    19.  
    20. for (let i=0;i
    21.     cir[i].onclick=function () {
    22.         f1(i)
    23.         index=i
    24.     }
    25. }
    26.  
    27. var l1=document.getElementById("l1")
    28. var l2=document.getElementById("l2")
    29. var index=0
    30. l2.onclick=function () {
    31.     if (index == img.length-1){
    32.         index=0
    33.     }else{
    34.         index++
    35.     }f1(index)
    36. }
    37.  
    38. l1.onclick=function () {
    39.     if (index == 0){
    40.         index=img.length-1
    41.     }else{
    42.         index--
    43.     }f1(index)
    44. }
    45.

            css代码如下：

    1)data文件代码

    1. .box{
    2.     width: 1800px;
    3.     height: 800px;
    4.     margin: 20px auto;
    5.     position: relative;
    6.     left: 0;
    7.     top: 0;
    8. }
    9. .box .img1 img{
    10.     width: 1800px;
    11.     height: 800px;
    12.     position: absolute;
    13.     top: 0;
    14.     left: 0;
    15. }
    16. .box .img2 img{
    17.     width: 700px;
    18.     height: 350px;
    19.     position: absolute;
    20.     top: 30%;
    21.     left: 30%;
    22.     margin-top: -50px;
    23.     margin-left: 15px;
    24. }
    25. .box .btn .img1{
    26.     width: 75px;
    27.     height: 75px;
    28.     position: absolute;
    29.     top: 50%;
    30.     left: 20%;
    31.     margin-left: 80px;
    32.     margin-top: -75px;
    33. }
    34. .box .btn .img2{
    35.     width: 75px;
    36.     height: 75px;
    37.     position: absolute;
    38.     top: 50%;
    39.     right: 20%;
    40.     margin-right: 80px;
    41.     margin-top: -75px;
    42. }
    43. .box .cir ul{
    44.     position: absolute;
    45.     left: 50%;
    46.     bottom: 25%;
    47.     transform: translateX(-50px);
    48.     margin-left: -10px;
    49.     z-index: 50;
    50. }
    51. .box .cir li{
    52.     width: 10px;
    53.     height: 10px;
    54.     background-color: forestgreen;
    55.     border-radius: 50%;
    56.     float: left;
    57.     margin-right: 5px;
    58.     border: forestgreen solid 5px;
    59. }
    60. .box .cir li:hover{
    61.     background-color: dimgray;
    62. }
    63. .box .btf #img3{
    64.     position: absolute;
    65.     bottom: 5%;
    66.     left: 30%;
    67.     margin-left: 40px;
    68.     margin-bottom: 5px;
    69.     z-index: 50;
    70. }
    71. .box .btf #img4{
    72.     position: absolute;
    73.     bottom: 5%;
    74.     left: 40%;
    75.     margin-left: 20px;
    76.     margin-bottom: 5px;
    77.     z-index: 50;
    78. }
    79. .box .btf #img5{
    80.     position: absolute;
    81.     bottom: 5%;
    82.     left: 50%;
    83.     margin-left: 35px;
    84.     margin-bottom: 5px;
    85.     z-index: 50;
    86. }
    87. .box .btf #img6{
    88.     position: absolute;
    89.     bottom: 5%;
    90.     right: 30%;
    91.     margin-right: 40px;
    92.     margin-bottom: 5px;
    93.     z-index: 50;
    94. }

    2）reset文件代码

    1. /* http://meyerweb.com/eric/tools/css/reset/
    2.    v2.0 | 20110126
    3.    License: none (public domain)
    4. */
    5.  
    6. html, body, div, span, applet, object, iframe,
    7. h2, h3, h4, h5, h6, p, blockquote, pre,
    8. a, abbr, acronym, address, big, cite, code,
    9. del, dfn, em, img, ins, kbd, q, s, samp,
    10. small, strike, strong, sub, sup, tt, var,
    11. b, u, i, center,
    12. dl, dt, dd, ol, ul, li,
    13. fieldset, form, label, legend,
    14. table, caption, tbody, tfoot, thead, tr, th, td,
    15. article, aside, canvas, details, embed,
    16. figure, figcaption, footer, header, hgroup,
    17. menu, nav, output, ruby, section, summary,
    18. time, mark, audio, video {
    19. 	margin: 0;
    20. 	padding: 0;
    21. 	border: 0;
    22. 	font-size: 100%;
    23. 	font: inherit;
    24. 	vertical-align: baseline;
    25. }
    26. /* HTML5 display-role reset for older browsers */
    27. article, aside, details, figcaption, figure,
    28. footer, header, hgroup, menu, nav, section {
    29. 	display: block;
    30. }
    31. body {
    32. 	line-height: 1;
    33. }
    34. ol, ul {
    35. 	list-style: none;
    36. }
    37. blockquote, q {
    38. 	quotes: none;
    39. }
    40. blockquote:before, blockquote:after,
    41. q:before, q:after {
    42. 	content: '';
    43. 	content: none;
    44. }
    45. table {
    46. 	border-collapse: collapse;
    47. 	border-spacing: 0;
    48. }

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

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

  • 相关阅读:
    【附源码】计算机毕业设计JAVA教学成果管理平台录像演示
    【LeetCode】12. 整数转罗马数字
    通过反射获取Class对象的四种方式
    linux中构建一个launch文件
    FCN的图像分割 语义分割 技术研究，基于pytorch
    Vulfocus复现log4j2和vulhub复现log4j2(CVE-2021-44228)
    d10月份会议
    关于前面介绍过的MPCC控制改为使用Yalmip解算器解以及MPC控制的一点想法
    MySQL是如何保证主从一致的
    Arduino驱动BMA220三轴加速度传感器（惯性测量传感器篇）
  • 原文地址：https://blog.csdn.net/m0_69801663/article/details/140392969