单击第一个按钮，令图片先淡出，然后换成另外一张图片再淡入……实现a1.gif~a9.gif这九张图片依次交替显示的效果。单击第二个按钮，页面重新加载。

你可以使用jQuery来实现图片淡入淡出的效果，同时根据按钮点击事件进行图片的切换。下面是一个示例代码：

HTML代码：

<button id="change-btn">切换图片</button>
<button id="reload-btn">重新加载</button>
<div id="image-container">
  <img src="a1.gif" alt="图片">
</div>

JavaScript代码：

$(document).ready(function() {
  var imgArr = ["a1.gif", "a2.gif", "a3.gif", "a4.gif", "a5.gif", "a6.gif", "a7.gif", "a8.gif", "a9.gif"];
  var index = 0;
  
  $("#change-btn").click(function() {
    $("#image-container img").fadeOut(500, function() {
      index = (index + 1) % imgArr.length;
      $(this).attr("src", imgArr[index]).fadeIn(500);
    });
  });
  
  $("#reload-btn").click(function() {
    location.reload();
  });
});

在上面的代码中，我们定义了一个图片文件名的数组，以及一个变量index来表示当前要显示的图片的下标。在切换按钮的点击事件中，我们首先将当前显示的图片淡出，然后根据数组中下一个元素的下标来切换图片，最后将新的图片淡入。在重新加载按钮的点击事件中，我们使用location.reload()方法来重新加载页面。