以下是一个
异形轮播图的案例，使用了
Swiper库实现：
HTML代码：
```html
<div class="
swiper-container">
<div class="
swiper-wrapper">
<div class="
swiper-slide" style="background-image:url('image1.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image2.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image3.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image4.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image5.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image6.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image7.jpg')"></div>
<div class="
swiper-slide" style="background-image:url('image8.jpg')"></div>
</div>
<div class="
swiper-pagination"></div>
</div>
```
CSS代码：
```css
.
swiper-container {
width: 100%;
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.
swiper-slide {
width: 50%;
height: 100%;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}
.
swiper-slide:nth-child(1) {
transform: translateX(0);
}
.
swiper-slide:nth-child(2) {
transform: translateX(50%);
}
.
swiper-slide:nth-child(3) {
transform: translateX(100%);
}
.
swiper-slide:nth-child(4) {
transform: translateX(150%);
}
.
swiper-slide:nth-child(5) {
transform: translateX(200%);
}
.
swiper-slide:nth-child(6) {
transform: translateX(250%);
}
.
swiper-slide:nth-child(7) {
transform: translateX(300%);
}
.
swiper-slide:nth-child(8) {
transform: translateX(350%);
}
.
swiper-pagination {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.
swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 10px;
cursor: pointer;
}
.
swiper-pagination-bullet-active {
background-color: #fff;
}
```
JavaScript代码：
```javascript
var
swiper = new
Swiper('.
swiper-container', {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.
swiper-pagination',
clickable: true,
},
on: {
slideChangeTransitionEnd: function() {
var activeIndex = this.activeIndex;
var slidesLength = this.slides.length;
var halfSlidesLength = Math.floor(slidesLength / 2);
var halfIndex = activeIndex % halfSlidesLength;
var translateX = halfIndex * 50;
var slides = this.slides;
for (var i = 0; i < slidesLength; i++) {
var slide = slides[i];
var slideIndex = slide.getAttribute('data-
swiper-slide-index');
var halfSlideIndex = slideIndex % halfSlidesLength;
var zIndex = halfSlidesLength - Math.abs(halfIndex - halfSlideIndex);
slide.style.transform = 'translateX(' + (50 * (slideIndex - activeIndex)) + '%) scale(' + zIndex / halfSlidesLength + ')';
slide.style.zIndex = zIndex;
}
},
},
});
```
以上代码实现了一个基于
Swiper的
异形轮播图，通过CSS设置每个
轮播项的位置以及过渡效果，通过JavaScript实现了
轮播项的缩放和层叠效果。同时，通过
Swiper的API实现了
轮播图的自动
轮播和分页器。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
