jQuery圆形轮播自动切换图文
发布时间：2024年01月11日
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>
文章来源:https://blog.csdn.net/qq_42400124/article/details/135503308
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- WireGuard 到底是干啥的？
- 05鸿蒙APP开发之加载网络列表
- 基于ssm医药信息管理系统论文
- 【Linux】vim的使用
- 多维时序 | MATLAB实CNN-Mutilhead-Attention卷积神经网络融合多头注意力机制多变量时间序列预测
- NFC刷卡soc芯片SI3262集成刷卡+触摸+ACD超低功耗一体
- 基于YOLOv7算法的高精度实时五种鸟类目标检测识别系统（PyTorch+Pyside6+YOLOv7）
- Linux C/C++ 显示NIC流量统计信息
- 数据库设计规范编制文档
- 【Linux】基本指令