前端 javascript jQuery圆形轮播自动切换图文

jQuery圆形轮播自动切换图文

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

效果展示

jquery圆形轮播自动切换文字

html代码片段

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代码

好文推荐