当下前端开发中在轮播图这块,除了,各大ui框架的轮播组件外,用的最多的就swiper了吧!毕竟ui框架中,轮播组件的定制化功能还是比较欠缺的,毕竟不是专业做轮播的。今天记录的是基于swiper 的一款轮播图,他是包含背景,,并且每一个轮播的图片在动的时候,与背景之间还存在一定的视觉差,这样使轮播图看起来更有层次感和流动感。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
.swiper-bg {
background: url('./bg.png') no-repeat 80%;
height: 500px;
}
.swiper-wrapper {
position: absolute;
top: 0;
}
.swiper-slide {
display: flex;
justify-content: center;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-bg" data-swiper-parallax="-5%" data-swiper-parallax-duration="1000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./banner.png" /></div>
<div class="swiper-slide"><img src="./banner.png" /></div>
<div class="swiper-slide"><img src="./banner.png" /></div>
</div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-pagination"></div>
<!--分页器。如果放置在swiper-container外面,需要自定义样式。-->
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
speed: 300,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
loop: true,
autoplay: true,
clickable: true,
})
mySwiper.params.pagination.clickable = true;
//此外还需要重新初始化pagination
mySwiper.pagination.destroy()
mySwiper.pagination.init()
mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
</script>
<script>
</script>
</body>
</html>
效果如下:
![a48b63e8d5e70963b0ffaf12a4b6f3bc.png](https://img-blog.csdnimg.cn/img_convert/a48b63e8d5e70963b0ffaf12a4b6f3bc.png)
这个图片体现不了动态效果,可以自行保存一下代码,本地运行一下,即可。