效果图：
代码: 借助swiper实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形旋转木马</title>
<!-- 引入外部文件 -->
<link rel="stylesheet" href="../../../0.src/swiper-bundle.min.css">
<script src="../../../0.src/swiper.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#carousel {
position: relative;
width: 1200px;
margin: 0 auto
}
#carousel .swiper {
padding-top: 20px;
padding-bottom: 40px;
}
#carousel .swiper-wrapper {
width: 270px;
height: 320px;
}
#carousel .swiper-slide {
width: 270px;
height: 320px;
background: #fff;
box-shadow: 0 8px 20px #ddd;
}
#carousel .swiper-slide img {
display: block;
width: 270px;
height: 320px;
}
#carousel .swiper-slide p {
line-height: 58px;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 0.8em;
margin: 0;
}
#carousel .swiper-pagination {
width: 100%;
bottom: 20px;
}
#carousel .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
background-color: #e8f5ff;
width: 20px;
height: 10px;
opacity: 1;
border-radius: 5px;
}
#carousel .swiper-pagination-bullets .swiper-pagination-bullet-active {
background-color: #3eb2f3;
width: 35px;
}
#carousel .swiper-button-prev {
left: -30px;
width: 45px;
height: 45px;
background: url(images/wm_button_icon.png) no-repeat;
background-position: 0 0;
background-size: 100%;
}
#carousel .swiper-button-prev:hover {
background-position: 0 -46px;
background-size: 100%
}
#carousel .swiper-button-next {
right: -30px;
width: 45px;
height: 45px;
background: url(images/wm_button_icon.png) no-repeat;
background-position: 0 -93px;
background-size: 100%;
}
#carousel .swiper-button-next:hover {
background-position: 0 -139px;
background-size: 100%
}
#carousel .swiper-button-prev::after,
#carousel .swiper-button-next::after {
content: '';
}
</style>
</head>
<body>
<div id="carousel">
<div class="swiper swiper-3d">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../../../0.lib/80edb4e1c518fb5dd90c3ac6048cbde.jpg" />
<p>洛阳大运河博物馆一日游</p>
</div>
<div class="swiper-slide"><img src="../../../0.lib/d63801db85c4fb206fe218230b3b634.jpg" />
<p>方特元旦跨年一日游</p>
</div>
<div class="swiper-slide"><img src="../../../0.lib/deaa504fc9740087c6937f8c114ac6c.jpg" />
<p>泰山攀登一日游</p>
</div>
<div class="swiper-slide"><img src="../../../0.lib/e08d40d4ea30f6b0e1c115b1d129b86.jpg" />
<p>元旦库年快乐就是一天</p>
</div>
<div class="swiper-slide"><img src="../../../0.lib/fb2f94c10d2b531ac300941852aae54.jpg" />
<p>美女美女美女美女</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
radius = slideW * 0.5 / Math.sin(Math.PI / 16);//半径。圆心并不是视点中心，视点在1200px
carouselSwiper = new Swiper('#carousel .swiper', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: false,
loop: true,
loopedSlides: 4,
grabCursor: true,
// autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function (swiper, progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
rotateY = (slideProgress + 1.5) * 22.5;//图片角度
translateZ = (radius - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * radius - 150) + 'px';//调整图片远近，刚好4个在画框内
slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');
}
},
setTransition: function (swiper, transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
</script>
</body>
</html>
