1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>点击轮播图</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       .main{
    8.           width:600px;
    9.           height:600px;
    10.       }
    11.       .h1{
    12.         width:500px;
    13.           height:300px;
    14.       }
    15.       .image_ul{
    16.           list-style-type:none;
    18.           margin:0px auto;
    19.           padding:0px;
    21.           width:600px;
    22.           height:80px;
    24.           display:flex;
    25.           justify-content:space-between;
    26.       }
    27.       .show_btn{
    28.         position:relative;
    30.           width:16%;
    31.           height:45px;
    32.           opacity:0.7;
    33.       }
    34.       .active{
    35.         position:relative;
    37.           width:16%;
    38.           height:45px;
    39.         opacity:1;
    40.       }
    41.       img:hover{
    42.           opacity:1;
    43.       }
    44.     </style>
    45.     <script type="text/javascript">
    46.       function show(e){
    47.         //点击任意一张图片将这张图片的路径，赋给id"h1"的img标签
    48.          document.getElementById('h1').src = e.src;
    50.         //将所有class为“active”的存进一个数组，然后数组遍历全部class改为"show_btn"
    51.          var arr=document.getElementsByClassName('active');
    52.          for(var i=0;i<arr.length;i++){
    53.             arr[i].className = 'show_btn';
    54.          }
    56.         //最后将本次点击的图片class改成“active”；
    57.          e.className = 'active';
    58.       }
    59.     </script>
    60.   </head>
    61.   <body>
    62.     <div class="main">
    63.       <img id='h1' class="h1" src="res/htmlLX/gunbo1.jpg" />
    64.       <div id="image_ul">
    65.         <img id='li1' class="active" onclick='show(this)' src="res/htmlLX/gunbo1.jpg" />
    66.         <img id='li2' class="show_btn" onclick='show(this)' src="res/htmlLX/gunbo2.jpg" />
    67.         <img id='li3' class="show_btn" onclick='show(this)' src="res/htmlLX/gunbo3.jpg" />
    68.         <img id='li4' class="show_btn" onclick='show(this)' src="res/htmlLX/gunbo4.jpg" />
    69.         <img id='li5' class="show_btn" onclick='show(this)' src="res/htmlLX/gunbo5.jpg" />
    70.       </div>
    71.     </div>
    72.   </body>
    73. </html>

    2021-09-25_154545.jpg