用原生js怎么写左边有一个大盒子里面有三个小盒子右边有一个大盒子装img怎么能让左边盒子每滑到一个上面右边的图片也随之发生改变左边每个盒子鼠标滑上去的样式和原先的不一样默认是第一个盒子样式和第一个盒子对应的图片

可以使用原生JavaScript来实现这个功能。首先，你需要给左边的每个小盒子添加一个事件监听器，监听鼠标移入事件。当鼠标移入某个小盒子时，需要改变该盒子的样式，并将对应的图片显示在右边的大盒子中。

以下是一个示例代码：

HTML部分：

<div class="left-container">
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
</div>
<div class="right-container">
  <img src="" id="image">
</div>

CSS部分：

.box {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-bottom: 10px;
}

.box:hover {
  background-color: blue;
  cursor: pointer;
}

.right-container {
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

#image {
  width: 100%;
  height: 100%;
}

JavaScript部分：

var boxes = document.getElementsByClassName("box");
var image = document.getElementById("image");

// 默认显示第一个盒子的样式和对应的图片
boxes[0].style.backgroundColor = "blue";
image.src = "path/to/first/image.jpg";

// 给每个盒子添加事件监听器
for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("mouseover", function() {
    // 移除所有盒子的样式
    for (var j = 0; j < boxes.length; j++) {
      boxes[j].style.backgroundColor = "gray";
    }
    // 改变当前盒子的样式
    this.style.backgroundColor = "blue";
    
    // 根据当前盒子的id设置对应的图片
    switch (this.id) {
      case "box1":
        image.src = "path/to/first/image.jpg";
        break;
      case "box2":
        image.src = "path/to/second/image.jpg";
        break;
      case "box3":
        image.src = "path/to/third/image.jpg";
        break;
    }
  });
}

通过上述代码，当鼠标滑过左边的小盒子时，会改变盒子的样式，并将对应的图片显示在右边的大盒子中。默认情况下，第一个盒子的样式和对应的图片会被设置为初始状态。