图片切换让imgbox 放图片的盒子根据图片的索引自动变化宽度，另外根据1和-1判断是左边按钮点击还是右边按钮点击tup

本文详细介绍了如何使用CSS进行轮播图的布局设计，并通过JavaScript实现轮播图的动态效果，包括图片切换、按钮控制等功能。文章提供了完整的HTML、CSS和JS代码示例，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .cont {
        width: 1000px;
        height: 260px;
        margin: 20px auto;
        position: relative;
      }
      .imgbox {
        position: absolute;
        left: 0;
        top: 0;
      }
      /* 1.将所有图片排成一行 */
      .imgbox a {
        float: left;
        width: 1000px;
        height: 260px;
        overflow: hidden;
      }
      .imgbox img {
        width: 1000px;
        height: 260px;
      }
      .imgbox a:nth-child(1) {
        z-index: 1;
      }

      .btns {
      }
      .btns input {
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(200, 200, 200, 0.4);
        position: absolute;
        top: 110px;
        z-index: 999999;
      }
      .left {
        left: 0;
      }
      .right {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="cont">
      <div class="imgbox">
        <a href=""><img src="images/1.jpg" alt=""/></a>
        <a href=""><img src="images/2.jpg" alt=""/></a>
        <a href=""><img src="images/3.jpg" alt=""/></a>
        <a href=""><img src="images/4.jpg" alt=""/></a>
        <!-- 2.复制第一张图，放在最后一张图的后面，用来过渡 -->
        <a href=""><img src="images/1.jpg" alt=""/></a>
      </div>
      <div class="btns">
        <input type="button" class="left" value="<<<" />
        <input type="button" class="right" value=">>>" />
      </div>
    </div>
  </body>
  <script src="move.js"></script>
  <script>
    function Banner() {
      this.imgbox = document.querySelector(".imgbox");
      this.right = document.querySelector(".right");
      this.left = document.querySelector(".left");
      this.img = this.imgbox.children;

      this.index = 0;
      this.init();
      
      this.addEvent();
    }
    Banner.prototype.init = function(){
        this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";
    }
    Banner.prototype.addEvent = function() {
      var that = this;
      this.left.onclick = function() {
        that.changeIndex(1);
      };
      this.right.onclick = function() {
        that.changeIndex(-1);
      };
    };
    Banner.prototype.changeIndex = function(type) {
      if (type == 1) {
        if (this.index == 0) {
          this.index = this.img.length - 2;
          this.imgbox.style.left =
            -(this.img.length - 1) * this.img[0].offsetWidth + "px";
        } else {
          this.index--;
        }
      } else {
        if (this.index == this.img.length - 1) {
          this.index = 1;
          this.imgbox.style.left = 0;
        } else {
          this.index++;
        }
      }
      this.move();
    };

    Banner.prototype.move = function() {
      // console.log(this.index)
      move(this.imgbox, { left: -this.img[0].offsetWidth * this.index });
    };

    new Banner();
  </script>
</html>