中化建工北京建设投资有限公司网站,网站建设要域名和什么,北京知名的网站建设公司,动画视频制作jQuery圆形轮播自动切换图文
注意这里用到了swiper插件#xff0c;记得引入swiper.js和swiper.css swiper官网 这里面用到的swiper版本是Swiper 4.4.2 不同版本有些写法会不同#xff0c;可对照官方文档进行调整
效果展示 jquery圆形轮播自动切换文字 html代码片段
li…jQuery圆形轮播自动切换图文
注意这里用到了swiper插件记得引入swiper.js和swiper.css swiper官网 这里面用到的swiper版本是Swiper 4.4.2 不同版本有些写法会不同可对照官方文档进行调整
效果展示 jquery圆形轮播自动切换文字 html代码片段
link relstylesheet hrefcss/swiper.min.css
div classabout-culture
img srcimg/bg classbg/
div classabout-culturemin
div classabout-culture-swiper swiper-containerdiv classswiper-wrapperdiv classswiper-slideh301/h3p天空之城/p/divdiv classswiper-slideh302/h3p龙猫/p/divdiv classswiper-slideh303/h3p魔女宅急便/p/divdiv classswiper-slideh304/h3p岁月的童话/p/divdiv classswiper-slideh305/h3p红猪/p/divdiv classswiper-slideh306/h3p侧耳倾听/p/divdiv classswiper-slideh307/h3p幽灵公主/p/divdiv classswiper-slideh308/h3p千与千寻/p/divdiv classswiper-slideh309/h3p猫的报恩/p/divdiv classswiper-slideh310/h3p哈尔的移动城堡/p/divdiv classswiper-slideh311/h3p地海战记/p/divdiv classswiper-slideh312/h3p悬崖上的金鱼公主/p/divdiv classswiper-slideh313/h3p借东西的小人阿莉埃蒂/p/divdiv classswiper-slideh314/h3p虞美人盛开的山坡/p/divdiv classswiper-slideh315/h3p起风了/p/div/div
/divdiv classwow fadeInUp set relative ul classcoronali classon em classen-bk grc f1801/emspan classen f18 wc天空之城/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1802/emspan classen f18 wc龙猫/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1803/emspan classen f18 wc魔女宅急便/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1804/emspan classen f18 wc岁月的童话/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1805/emspan classen f18 wc红猪/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1806/emspan classen f18 wc侧耳倾听/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1807/emspan classen f18 wc幽灵公主/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1808/emspan classen f18 wc千与千寻/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1809/emspan classen f18 wc猫的报恩/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1810/emspan classen f18 wc哈尔的移动城堡/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1811/emspan classen f18 wc地海战记/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1812/emspan classen f18 wc悬崖上的金鱼公主/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1813/emspan classen f18 wc借东西的小人阿莉埃蒂/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1814/emspan classen f18 wc虞美人盛开的山坡/spandiv classline/divdiv classdot/div/lili em classen-bk grc f1815/emspan classen f18 wc起风了/spandiv classline/divdiv classdot/div/li/ulimg srcimg/scale-circle.png classscale-circle img srcimg/icon-click.png alt classicon-click
/div
/div/divcss样式
/* 图片圆形切换 */
.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 .coronali{position:absolute;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index: 1;}
.about-culture .set .coronali 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 .coronali:nth-of-type(2n) span{background: linear-gradient(-28deg, #1F929F, #33ADBB);}
.set .coronali.on span {transform:translateY(0);opacity:1;color:#FFFFFF;}
/* .set .coronali.on em {transform:translateY(-20px);opacity:1;} */
.set .coronali: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 .coronali 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 .coronali{height: auto;} */
.set .coronali em{position: relative;height: auto;font-size: 50px;color: #3A608B;}
.about-culture .set .coronali{display: block;}
.about-culture .set .coronali span{transform: none;margin-top: 10px;}
.set .coronali .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 .coronali .line{width: 30px;height: 40px;background: linear-gradient(to bottom,transparent,#3A618C);margin: auto;margin-bottom: -10px;}
.set .coronali:nth-of-type(2n) .line{background: linear-gradient(to bottom,transparent,#33ADBB);}
.set .coronali: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 srcjs/jquery.js/script
script srcjs/swiper.min.js/script
scriptinitCorona();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;$(.coronali).eq(activeIndex).addClass(on).siblings().removeClass(on)$(.corona).css(transform, rotate( (-activeIndex * 24) deg));}}})$(.coronali).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 $(.coronali);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
