jQuery 点击按扭换一换是一个非常实用的交互效果，可以让网站在视觉上更加生动、有趣。下面介绍如何通过 jQuery 来实现点击按扭换一换的效果。

// HTML 代码
<div class="btn">点击切换图片</div>
<img src="image1.jpg" class="pic">

// CSS 代码
.pic {
  width: 200px;
  height: 200px;
}

// jQuery 代码
$(document).ready(function() {
  var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 定义图片数组
  var imgIndex = 0; // 定义初始图片索引

  $(".btn").click(function() {
    imgIndex++; // 点击按扭，将图片索引加 1
    if (imgIndex == images.length) {
      imgIndex = 0; // 如果已经显示完所有图片，将图片索引重置为 0
    }

    $(".pic").fadeOut("slow", function() { // 淡出当前图片
      $(".pic").attr("src", images[imgIndex]); // 切换到下一张图片
      $(".pic").fadeIn(); // 淡入新的图片
    });
  });
});

上面的代码中，我们首先定义了一个图片数组和一个初始图片索引。当用户点击按钮时，我们将索引加 1，并使用 jQuery 的 fadeOut() 方法将当前图片淡出，然后切换到下一张图片，并使用 fadeIn() 方法淡入新的图片。

需要注意的是，我们在最后的 fadeIn() 方法中没有设置任何持续时间，这意味着它会使用 jQuery 的默认动画时间进行切换。如果需要自定义动画时间，可以在 fadeIn() 和 fadeOut() 方法中传入参数，如：

$(".pic").fadeOut(1000, function() { /* ... */ });
$(".pic").fadeIn(1000);

上述代码中的 1000 表示动画的持续时间为 1 秒钟。