原生JavaScript实现鼠标滑过li切换样式和图片

可以使用以下步骤用原生JavaScript实现鼠标滑过三个li元素时，对应的li元素样式发生改变，并且右边图片盒子显示对应图片的效果。默认选中第一个li，显示对应图片。

1. 创建包含三个li元素的ul元素和用于显示图片的盒子div元素。

<ul id='list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div id='image-box'>
<img src='default-image.jpg' alt='Default Image'>
</div>

2. 使用原生JavaScript获取ul元素和li元素，并为每个li元素添加鼠标移入事件监听器。

var list = document.getElementById('list');
var items = list.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('mouseover', function() {
// 鼠标移入事件处理函数
// 1. 移除所有li的样式
for (var j = 0; j < items.length; j++) {
items[j].classList.remove('active');
}
// 2. 添加当前li的样式
this.classList.add('active');

// 3. 更新右边图片的内容
var imageBox = document.getElementById('image-box');
var image = imageBox.getElementsByTagName('img')[0];
image.src = 'image' + (i + 1) + '.jpg'; // 假设图片的命名为image1.jpg, image2.jpg, image3.jpg

});
}

3. 在CSS中定义.active类，用于指定选中li的样式。

.active {
  background-color: #f00;
  color: #fff;
}

这样，当鼠标滑到每个li上时，该li的样式会发生改变并且右边的图片会更新为对应的图片。默认情况下，第一个li的样式会被设置为选中状态。