jQuery圆形轮播自动切换图文

Fish北冥

已于 2024-01-11 09:16:56 修改

阅读量1k

点赞数 28

分类专栏： JS jQuery HTML 文章标签： jquery 前端 javascript

于 2024-01-11 09:12:35 首次发布

本文链接：https://blog.csdn.net/qq_42400124/article/details/135503308

版权

JS 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 1 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

jQuery圆形轮播自动切换图文

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

效果展示

圆形轮播效果图

jquery圆形轮播自动切换文字

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 / 2
		var 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>