1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8" />
    5.     <style type="text/css">
    6.         .main{
    7.             width: 500px;
    8.             height: 500px;
    9.         }
    10.         #container {
    11.             position: relative;
    12.             width: 550px;
    13.             height: 252px;
    14.             border: 3px solid #333;
    15.             overflow: hidden;
    16.         }
    17.         #list {
    18.             position: absolute;
    19.             z-index: 1;
    20.             width: 1100px;
    21.             height: 252px;
    22.             display:flex;
    24.         }
    25.         #list img {
    26.             width: 550px;
    27.         }
    28.         .arrow {
    29.             display:block;
    30.             position: absolute;
    31.             top: 105px;
    32.             z-index: 2;
    33.             display: none;
    34.             width: 20px;
    35.             height: 40px;
    36.             font-size: 36px;
    37.             font-weight: bold;
    38.             line-height: 37px;
    39.             text-align: center;
    40.             color: #fff;
    41.             cursor: pointer;
    42.         }
    43.         #container:hover .arrow {
    44.             display: block;
    45.         }
    46.         #prev {
    47.             left: 3px;
    48.         }
    49.         #next {
    50.             right: 20px;
    51.         }
    52.     </style>
    53. </head>
    54. <body>
    55.     <div id="container">
    56.         <div id="list" style="left:0px;">
    57.             <img src="res/htmlLX/gunbo1.jpg" />
    58.             <img src="res/htmlLX/gunbo2.jpg" />
    59.         </div>
    60.         <span id="prev" class="arrow" onclick="last()">《</span>
    61.         <span id="next" class="arrow" onclick="next()">》</span>
    62.     </div>
    63.     <script>
    64.             var list = document.getElementById('list');
    66.             //上一个
    67.             function last() {    
    68.                     var a = parseInt(list.style.left)
    69.                     if(a === 0){
    70.                         list.style.left = -550 + "px";
    71.                     }
    72.                     else if(a = -550){
    73.                         list.style.left = 0 + "px";
    74.                     }
    76.             }
    77.             //下一个
    78.             function next() {  
    79.                 var a = parseInt(list.style.left)
    80.                     if(a === 0){
    81.                         list.style.left = -550 + "px";
    82.                     }
    83.                     else if(a = -550){
    84.                         list.style.left = 0 + "px";
    85.                     }
    86.             }
    88.            //第二个方法 
    89.             function last() {    
    90.                  var newleft = parseInt(list.style.left) + 550;
    91.                  list.style.left = newleft + "px";
    92.                  if(newleft > 0){
    93.                      list.style.left = -550 + "px";
    94.                  }
    95.              }
    96.             function next() {  
    97.                  var newleft = parseInt(list.style.left) - 550;
    98.                  list.style.left = newleft + "px";
    99.                  if(newleft < -550){
    100.                      list.style.left = 0 + "px";
    101.                  }
    102.             }
    103.     </script>
    104. </body>
    105. </html>

    2021-09-25_160918.jpg2021-09-25_160937.jpg