最终效果如下图，废话不多说了，有废话的时间都能写3行代码了。

原生JS+CSS3，不需要jQuery库。

一、css部分

<style>

.carousel {padding: 20px;margin-top: -60px;-webkit-perspective: 500px;perspective: 500px;overflow: hidden;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}

.carousel > * {-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;}

.carousel figure {margin: 0;width: 40%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: -webkit-transform 0.5s;transition: -webkit-transform 0.5s;transition: transform 0.5s;transition: transform 0.5s, -webkit-transform 0.5s;}

.carousel figure img {width: 100%;box-sizing: border-box;padding: 0 0px;}

.carousel figure img:not(:first-of-type) {position: absolute;left: 0;top: 0;}

.carousel nav {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}

.carousel nav .prev{position: absolute;width: 38px;height: 70px;left: 22%;top: 42%;background: url(./img/prev.png);}

.carousel nav .next{position: absolute;width: 38px;height: 70px;right: 22%;top: 42%;background: url(./img/next.png);}

</style>

二、HTML部分

<div class="carousel" data-gap="80">

<figure>

<img src="./img/1.jpg" alt="">

<img src="./img/2.jpg" alt="">

<img src="./img/3.jpg" alt="">

<img src="./img/4.jpg" alt="">

<img src="./img/5.jpg" alt="">

<img src="./img/2.jpg" alt="">

<img src="./img/3.jpg" alt="">

<img src="./img/4.jpg" alt="">

</figure>

<nav>

<button class="nav prev"></button>

<button class="nav next"></button>

</nav>

</div>

三、JS部分

<script>

window.addEventListener('load', function () {

var carousels = document.querySelectorAll('.carousel');

for (var i = 0; i < carousels.length; i++) {

carousel(carousels[i]);

}

});

function carousel(root) {

var figure = root.querySelector('figure'),

nav = root.querySelector('nav'),

img = figure.children,

n = img.length,

gap = root.dataset.gap || 0,

bfc = 'bfc' in root.dataset,

theta = 2 * Math.PI / n,

currImage = 0;

setupCarousel(n, parseFloat(getComputedStyle(img[0]).width));

window.addEventListener('resize', function () {

setupCarousel(n, parseFloat(getComputedStyle(img[0]).width));

});

setupNavigation();

function setupCarousel(n, s) {

var apothem = s / (2 * Math.tan(Math.PI / n));

figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

for (var i = 0; i < n; i++) {

img[i].style.padding = gap + 'px';

}for (i = 1; i < n; i++) {

img[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';

img[i].style.transform = 'rotateY(' + i * theta + 'rad)';

}

if (bfc) for (i = 0; i < n; i++) {

img[i].style.backfaceVisibility = 'hidden';

}rotateCarousel(currImage);

}

function setupNavigation() {

nav.addEventListener('click', onClick, true);

function onClick(e) {

e.stopPropagation();

var t = e.target;

if (t.tagName.toUpperCase() != 'BUTTON') return;

if (t.classList.contains('next')) {

currImage++;

} else {

currImage--;

}

rotateCarousel(currImage);

}

}

function rotateCarousel(imageIndex) {

figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';

}

}

</script>

好了，本例子到此结束，要是有用到的，直接复制。希望各位能分享出去，让需要的人发现。

喜欢的可以关注哦。