用原生js怎么写左边有三个li右边有一个装图片的大盒子怎么让鼠标滑到每个li上面的时候这个li的样式发生改变并且右边的图片发生改变默认选中的是第一个li的图片和显示的是第一个的样式

可以使用原生JavaScript来实现这个功能。首先，我们需要获取到左边的三个li和右边的图片盒子。然后，我们需要给每个li添加鼠标移入事件，当鼠标移入li时，改变li的样式，并且改变右边图片盒子的内容。

下面是一个实现示例：

HTML代码：

<ul>
  <li class="active">第一个li</li>
  <li>第二个li</li>
  <li>第三个li</li>
</ul>

<div id="imageBox">
  <img src="first.jpg" alt="第一个图片">
</div>

JavaScript代码：

// 获取左边的li和右边的图片盒子
var lis = document.querySelectorAll('li');
var imageBox = document.getElementById('imageBox');

// 给每个li添加鼠标移入事件
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener('mouseover', function() {
    // 移除所有li的active类名和样式
    for (var j = 0; j < lis.length; j++) {
      lis[j].classList.remove('active');
    }
    // 添加当前li的active类名和样式
    this.classList.add('active');
    
    // 根据当前li的索引改变右边图片盒子的内容
    switch (this.innerHTML) {
      case '第一个li':
        imageBox.innerHTML = '<img src="first.jpg" alt="第一个图片">';
        break;
      case '第二个li':
        imageBox.innerHTML = '<img src="second.jpg" alt="第二个图片">';
        break;
      case '第三个li':
        imageBox.innerHTML = '<img src="third.jpg" alt="第三个图片">';
        break;
    }
  });
}

// 默认选中第一个li
lis[0].classList.add('active');

CSS代码：

li.active {
  background-color: yellow;
}

#imageBox img {
  width: 300px;
  height: 200px;
}

在上面的代码中，我们使用了classList来添加和移除类名，来改变li的样式。根据当前li的内容来改变右边图片盒子的内容，使用了switch语句。最后，我们默认选中了第一个li，并添加了active类名和样式。