如何用jQuery实现点击左右按钮切换指定头部图片？

核心前提确认 #

必须在页面中引入jQuery库（可下载本地文件后引入，比如<script src="jquery.min.js"></script>，路径根据项目文件位置自行调整），否则所有jQuery代码均无法生效。

绑定点击事件的代码 #

在HTML的</body>标签前添加以下代码：

$(function() {
  // 左侧按钮点击切换图片
  $('#infoimg-left-button').on('click', function() {
    $('#infoimg-id').attr('src', 'images/2header-pic.jpg');
  });

  // 右侧按钮点击切换图片
  $('#infoimg-right').on('click', function() {
    $('#infoimg-id').attr('src', 'images/2header-pic.jpg');
  });
});

修复CSS问题 #

1. 右侧按钮#infoimg-right无定位样式，无法显示在正确位置，添加以下CSS：

#infoimg-right {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: calc(48%);
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 3px;
  border-radius: 80px;
  width: 40px;
  cursor: pointer;
  text-align: center;
  color: #fffffe;
}

2. 左侧按钮容器#infoimg-left的left: calc(48%)可能导致按钮被图片遮挡，可根据实际布局调整为left: calc(45%)，确保按钮在图片上方且能被点击。

完成以上调整后，点击左右按钮即可将图片切换为images/2header-pic.jpg。

内容的提问来源于stack exchange，提问作者Nem mem