swiper环状滚动效果
2024-12-05 Umming jQuery插件 评论(0) 浏览(71)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>环形旋转木马视图切换</title>
<style>
@charset "utf-8";
/* CSS Document */
body {
padding: 0;
margin: 0;
}
#carousel {
margin: 0 auto;
position: relative;
width: 600px;
height: 600px;
}
#carousel::before{
content: "";
display: block;
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
width: calc(600px / 9 / 2 * 8);
height: calc(600px / 9 * 8);
background: rgba(0,0,0,0.1);
border-radius: 0 calc(600px / 9 / 2 * 8) calc(600px / 9 / 2 * 8) 0;
}
#carousel .swiper {
height: 100%;
visibility: hidden;
overflow: visible;
}
#carousel .swiper-wrapper {
visibility: visible;
overflow: visible;
align-items: flex-end;
}
#carousel .swiper-slide {
width: calc(600px / 9);
height: calc(600px / 9);
flex-shrink: 0;
position: relative;
overflow: visible;
}
#carousel .swiper-slide .inner {
line-height: 58px;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 0.8em;
margin: 0;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="carousel">
<div class="swiper swiper-3d">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="inner">2011</div>
</div>
<div class="swiper-slide">
<div class="inner">2012</div>
</div>
<div class="swiper-slide">
<div class="inner">2013</div>
</div>
<div class="swiper-slide">
<div class="inner">2014</div>
</div>
<div class="swiper-slide">
<div class="inner">2015</div>
</div>
<div class="swiper-slide">
<div class="inner">2016</div>
</div>
<div class="swiper-slide">
<div class="inner">2017</div>
</div>
<div class="swiper-slide">
<div class="inner">2018</div>
</div>
<div class="swiper-slide">
<div class="inner">2019</div>
</div>
<div class="swiper-slide">
<div class="inner">2010</div>
</div>
<div class="swiper-slide">
<div class="inner">2011</div>
</div>
<div class="swiper-slide">
<div class="inner">2012</div>
</div>
<div class="swiper-slide">
<div class="inner">2013</div>
</div>
<div class="swiper-slide">
<div class="inner">2014</div>
</div>
<div class="swiper-slide">
<div class="inner">2015</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
<script>
// slide的宽高（必须要相同）
var width = $('#carousel .swiper-slide').width();
var height = $('#carousel .swiper-slide').height();
// swiper的内容区宽高的一半
var cWidth = $('#carousel').width() / 2;
var cHeight = $('#carousel').height() / 2;
var radiusX = cWidth - width / 2;//半径。圆心并不是视点中心，视点在1200px
var radiusY = cHeight - height / 2;//半径。圆心并不是视点中心，视点在1200px
var du = Math.PI / 10;
carouselSwiper = new Swiper('#carousel .swiper', {
watchSlidesProgress: true,
slidesPerView: 'auto',
direction: 'vertical',
centeredSlides: true,
loop: true,
loopedSlides: 9,
grabCursor: true,
mousewheel: true,
// autoplay: true,
on: {
// 兼容3以上6一下代码,6以上可以删除
slideChangeTransitionStart: function () {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(300);
}
},
slideChangeTransitionEnd: function () {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(300);
}
},
// 兼容3以上6一下代码 END
progress: function (swiper, progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
var toCenter = slideProgress * width;
translateY = (radiusX * Math.sin(du * -slideProgress)) + toCenter + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
// (Math.cos 前边加负号，就是向左的
//translateX = cHeight + -(Math.cos(du * -slideProgress) * radiusY) - height / 2 + 'px';
translateX = cHeight + -(Math.cos(du * -slideProgress) * radiusY) - height / 2 + 'px';//调整图片远近，刚好4个在画框内
slide.transform('translateY(' + translateY + ') translateX(-' + translateX + ')');
$(slide).css({
opacity: 1
});
//需要的个数除以2
//显示5个 if (Math.abs(slideProgress) > 2.5) {
if (Math.abs(slideProgress) > 3.5) {
$(slide).css({
opacity: 0,
'z-index': -1
});
} else {
}
}
},
setTransition: function (swiper, transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
</script>
</body>
</html> 标签: swiper
本文链接：https://www.umming.com/jquery/373.html
声明：本站信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！
也许你还会对下面的内容感兴趣：