jQuery圆形轮播自动切换图文

注意这里用到了swiper插件，记得引入swiper.js和swiper.css
swiper官网
这里面用到的swiper版本是Swiper 4.4.2
不同版本有些写法会不同，可对照官方文档进行调整

效果展示

html代码片段

<link rel="stylesheet" href="css/swiper.min.css">
<div class="about-culture">
<img src="img/bg" class="bg"/>
<div class="about-culturemin">
<div class="about-culture-swiper swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><h3>01</h3><p>天空之城</p></div><div class="swiper-slide"><h3>02</h3><p>龙猫</p></div><div class="swiper-slide"><h3>03</h3><p>魔女宅急便</p></div><div class="swiper-slide"><h3>04</h3><p>岁月的童话</p></div><div class="swiper-slide"><h3>05</h3><p>红猪</p></div><div class="swiper-slide"><h3>06</h3><p>侧耳倾听</p></div><div class="swiper-slide"><h3>07</h3><p>幽灵公主</p></div><div class="swiper-slide"><h3>08</h3><p>千与千寻</p></div><div class="swiper-slide"><h3>09</h3><p>猫的报恩</p></div><div class="swiper-slide"><h3>10</h3><p>哈尔的移动城堡</p></div><div class="swiper-slide"><h3>11</h3><p>地海战记</p></div><div class="swiper-slide"><h3>12</h3><p>悬崖上的金鱼公主</p></div><div class="swiper-slide"><h3>13</h3><p>借东西的小人阿莉埃蒂</p></div><div class="swiper-slide"><h3>14</h3><p>虞美人盛开的山坡</p></div><div class="swiper-slide"><h3>15</h3><p>起风了</p></div></div>
</div><div class="wow fadeInUp set relative" ><ul class="corona"><li  class="on" ><em class="en-bk grc f18">01</em><span class="en f18 wc">天空之城</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">02</em><span class="en f18 wc">龙猫</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">03</em><span class="en f18 wc">魔女宅急便</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">04</em><span class="en f18 wc">岁月的童话</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">05</em><span class="en f18 wc">红猪</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">06</em><span class="en f18 wc">侧耳倾听</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">07</em><span class="en f18 wc">幽灵公主</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">08</em><span class="en f18 wc">千与千寻</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">09</em><span class="en f18 wc">猫的报恩</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">10</em><span class="en f18 wc">哈尔的移动城堡</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">11</em><span class="en f18 wc">地海战记</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">12</em><span class="en f18 wc">悬崖上的金鱼公主</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">13</em><span class="en f18 wc">借东西的小人阿莉埃蒂</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">14</em><span class="en f18 wc">虞美人盛开的山坡</span><div class="line"></div><div class="dot"></div></li><li ><em class="en-bk grc f18">15</em><span class="en f18 wc">起风了</span><div class="line"></div><div class="dot"></div></li></ul><img src="img/scale-circle.png" class="scale-circle" ><img src="img/icon-click.png" alt="" class="icon-click">
</div>
</div></div>

css样式

/* 图片圆形切换 */
.about-culture{width:100%;position: relative;overflow: hidden;}
.about-culture .bg{position: absolute;left: 0;top: 0;z-index: 0;opacity: 0.5;}
.about-culture .set{position:relative;height:340px;left:0;bottom:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:0;z-index:25;opacity:1;transition:opacity 2s ease-in-out;overflow: hidden;padding-top: 300px;}
.about-culture .set .corona{position:absolute;left:0;right:0;z-index:10;margin:auto;bottom:-43vw;width:1280px;height:1280px;transition:transform .8s ease-out;}
.about-culture .set .corona>li{position:absolute;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index: 1;}
.about-culture .set .corona>li span {width:210px;text-align:center;white-space:nowrap;display:block;opacity:1;letter-spacing:2px;transform:translateY(10px);transition:opacity .5s ease-in-out,transform .5s ease-in-out;height: 70px;background: linear-gradient(-28deg, #3A618C, #547EAD);border-radius: 16px;font-size: 16px;color: #FFFFFF;line-height: 70px;}
.about-culture .set .corona>li:nth-of-type(2n) span{background: linear-gradient(-28deg, #1F929F, #33ADBB);}
.set .corona>li.on span {transform:translateY(0);opacity:1;color:#FFFFFF;}
/* .set .corona>li.on em {transform:translateY(-20px);opacity:1;} */
.set .corona>li:nth-of-type(2n) em{color: #1F929F;}
.set .corona:after {content:"";width:77%;height:77%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border:1px solid #3A608B;border-radius:50%;}
.set .corona>li em {position:absolute;width:100%;height:100%;top:0;left:0;text-align:center;line-height:40px;transform:translateY(0);display:block;transition:opacity .5s ease-in-out,transform .5s ease-in-out;color:#878787;}
.set .scale-circle {position:absolute;left:0;right:0;margin:auto;bottom:-35vw;width:1000px;height:1000px;transform:scale(0.9) rotate(0deg);animation:scaleCircleAni 100s linear infinite;}
@keyframes scaleCircleAni {0% {transform:scale(0.9) rotate(0deg);}100% {transform:scale(0.9) rotate(360deg);}
}
.set .icon-click { position: absolute; top: initial; left: 50%; width: auto; transform: translate(-50%, -50%);bottom:30%; }
/* .about-culture .set .corona>li{height: auto;} */
.set .corona>li em{position: relative;height: auto;font-size: 50px;color: #3A608B;}
.about-culture .set .corona>li{display: block;}
.about-culture .set .corona>li span{transform: none;margin-top: 10px;}
.set .corona>li .dot{width: 33px;height: 34px;background: #3A618C;border: 6px solid #FFFFFF;border-radius: 50%;box-sizing: border-box;position: absolute;left: 50%;margin-left: -17px;}
.set .corona>li .line{width: 30px;height: 40px;background: linear-gradient(to bottom,transparent,#3A618C);margin: auto;margin-bottom: -10px;}
.set .corona>li:nth-of-type(2n) .line{background: linear-gradient(to bottom,transparent,#33ADBB);}
.set .corona>li:nth-of-type(2n) .dot{background-color: #33ADBB;}/* about-culturemin */
.about-culturemin{position: relative;width: 1280px;margin: auto;margin-top: -60px;}
/* about-culture-swiper */
.about-culture-swiper{width: 100%;position: absolute;left: 0;bottom: 60px;}
.about-culture-swiper .swiper-slide{text-align: center;opacity: 0!important;}
.about-culture-swiper .swiper-slide.swiper-slide-active{opacity: 1!important;}
.about-culture-swiper h3{font-size: 42px;color: #3A608B;font-style: italic;font-weight: bold;margin-bottom: 20px;}
.about-culture-swiper p{font-size: 26px;color: #333333;}

js代码

<script src="js/jquery.js"></script>
<script src="js/swiper.min.js"></script>
<script>initCorona();var cultureSwiper = new Swiper('.about-culture-swiper', {slidesPerView: 1,effect : 'fade',autoplay: {disableOnInteraction: false,delay: 4000},// autoplay: false,on: {init: function () {},slideChangeTransitionEnd: function () {},slideChangeTransitionStart: function () {var activeIndex = this.activeIndex;$('.corona>li').eq(activeIndex).addClass('on').siblings().removeClass('on')$('.corona').css('transform', 'rotate(' + (-activeIndex * 24) + 'deg)');}}})$('.corona>li').click(function () {if ($(document).width() > 500) {var index = $(this).index();$(this).addClass('on').siblings().removeClass('on')$('.corona').css('transform', 'rotate(' + (-index * 24) + 'deg)');cultureSwiper.slideTo(index)}});function initCorona() {var $coronaEl = $(".corona");var $coronaChildEl = $(".corona>li");var rotateDeg = 24;var r = $coronaEl[0].getBoundingClientRect().width / 2var windowWidth = $(window).width();$coronaChildEl.each(function (test, dom) {var t = (test * rotateDeg - 90) / 180 * Math.PI;// $(dom).css({//     transform: "rotate(" + test * rotateDeg + "deg)",//     left: r + r * Math.cos(t) - 100 + "px",//     top: r + r * Math.sin(t) - 20 + "px"// })if(windowWidth > 1080) {$(dom).css({transform: "rotate(" + test * rotateDeg + "deg)",left: r + r * Math.cos(t) - 100 + "px",top: r + r * Math.sin(t) - 20 + "px"})} else {$(dom).css({transform: "rotate(" + test * rotateDeg + "deg)",left: r + r * Math.cos(t) - 50 + "px",top: r + r * Math.sin(t) - 20 + "px"})}})}
</script>