这是一个比较复杂的任务，需要用到HTML5的Canvas和CSS3的过渡效果。这里提供一个基本的实现方式，你可以根据自己的需求进行修改和优化。

HTML部分：

```html

```

CSS部分：

```css

container {

position: relative; width: 100%; height: 100vh; overflow: hidden; }

container img {

position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.5s ease; } ```

JavaScript部分：

```javascript var container = document.getElementById('container'); var images = container.getElementsByTagName('img'); var slideIndex = 0;

function showSlides() { var i; var slides = document.getElementsByClassName('slide'); for (i = 0; i < slides.length; i++) { slides[i].style.display = i === slideIndex ? 'block' : 'none'; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} showSlides(); }

function changeSlide() { var i; var slides = document.getElementsByClassName('slide'); for (i = 0; i < slides.length; i++) { slides[i].style.display = i === slideIndex ? 'none' : 'block'; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} showSlides(); }

container.addEventListener('click', showSlides); container.addEventListener('click', changeSlide); ```

这个代码首先获取了容器和所有图片的元素，然后定义了切换图片和显示/隐藏图片的函数。在切换图片的时候，我们首先检查当前的图片是否显示，如果显示，我们就隐藏它，如果隐藏，我们就显示它。在切换图片的时候，我们检查当前的图片索引是否大于所有图片的索引，如果大于，我们就显示下一个图片，如果小于，我们就隐藏下一个图片。

在切换图片的时候，我们还添加了一个动画效果，使得图片在切换的时候可以向上滑动。