请使用vue.js框架实现简单的图片轮播效果，要求共计5张图片，5个按钮，单击按钮实现图片动态切换。 请上传源码和运行截图。

在Vue.js中实现图片轮播效果，我们可以使用`v-for`指令遍历图片数组，并结合事件绑定切换图片。下面是一个简单的示例代码，假设我们有一个数组`imgUrls`存储了五张图片的URL地址：

<template>
  <div class="carousel">
    <transition-group name="carousel-item" tag="div" v-for="(image, index) in imgUrls" :key="index">
      <img :src="image" alt="Slide {{ index + 1 }}" @click="showNext(index)">
    </transition-group>

    <button v-if="currentIndex > 0" @click="showPrev(currentIndex - 1)">上一张</button>
    <button v-else disabled>上一张</button>
    <button @click="showNext(0)">下一张</button>
    <button v-if="currentIndex !== imgUrls.length - 1" @click="showPrev(currentIndex + 1)">下一张</button>
    <button v-else disabled>下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrls: ['url1', 'url2', 'url3', 'url4', 'url5'], // 替换为实际图片URL
      currentIndex: 0,
    };
  },
  methods: {
    showPrev(newIndex) {
      if (newIndex >= 0) {
        this.currentIndex = newIndex;
      }
    },
    showNext(newIndex) {
      const next = Math.min(this.imgUrls.length - 1, (this.currentIndex + 1) % this.imgUrls.length);
      this.currentIndex = next;
    },
  },
  directives: {
    carouselItem: {
      enter(node, done) {
        node.style.opacity = 0;
        setTimeout(() => {
          node.style.opacity = 1;
          done();
        }, 300);
      },
      leave(node, done) {
        node.style.opacity = 0;
        setTimeout(() => {
          node.style.display = "none";
          done();
        }, 300);
      },
    },
  },
};
</script>

<style scoped>
.carousel-item {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
  display: block;
}
</style>

在这个例子中，我们创建了一个名为`carousel-item`的过渡组，用于淡入淡出图片。点击上一张或下一张按钮会触发`showPrev`或`showNext`方法，更新当前显示的图片索引。

为了运行这个示例，你需要将`url1`, `url2`, ...替换为实际的图片URL，并确保Vue环境已经配置好。你可以通过npm或yarn安装Vue CLI，然后创建一个新的项目并粘贴上述代码。

请注意，这只是一个基础的轮播组件，实际应用可能需要考虑更多的功能，如自动播放、指示器等。同时，由于这里无法直接提供源码文件和运行截图，建议您在本地环境中尝试运行以上代码。