.Pictureul{ width: 430px; height: 320px; position: absolute; } .pli{ width: 432px; height: 320px; float: left; } .pi2{ top: 0px; width: 430px; height: 320px; position: absolute; background: url("../images/p2.jpg"); opacity: 0; transition:all 0.5s; } .pi3{ top: 0px; width: 430px; height: 320px; position: absolute; background: url("../images/p3.jpg"); opacity: 0; transition:all 0.5s; } .pi4{ top: 0px; width: 430px; height: 320px; position: absolute; background: url("../images/p4.jpg"); opacity: 0; transition:all 0.5s; } .Pictureul2{ padding-top: 15px; padding-left: 180px; } .Pictureul2 li{ float: left; margin-left: 5px; } .pictureul1, .Pictureul2 { display: inline-block; } .Pictureul2 .point2:hover .pi2{ opacity: 1; } .Pictureul2 .point2:hover .pi1{ opacity: 0 ; }更改这串代码实现点击不同point能够完成图片的切换

可以在每个point上添加一个点击事件，触发事件时改变对应的图片的opacity属性值即可完成图片的切换。具体的实现方式如下：

1. 在每个point元素上添加一个data-index属性，表示对应的图片的索引值，例如：

<ul class="Pictureul2">
  <li class="point2" data-index="1">1</li>
  <li class="point2" data-index="2">2</li>
  <li class="point2" data-index="3">3</li>
</ul>

2. 在JavaScript中获取所有point元素，并为其添加点击事件，示例如下：

const points = document.querySelectorAll('.point2');
const pictures = document.querySelectorAll('.Pictureul .pli');
points.forEach((point) => {
  point.addEventListener('click', () => {
    const index = point.dataset.index;
    pictures.forEach((picture) => {
      picture.style.opacity = 0;
    });
    pictures[index - 1].style.opacity = 1;
  });
});

其中，通过获取点击的point元素的data-index属性值来获取对应的图片的索引值，然后将所有图片的opacity属性值设置为0，再将对应索引值的图片的opacity属性值设置为1即可完成图片的切换。