Swiper全屏自适应图片轮播代码

小说骑士 2019-11-19 174 阅读

特效描述:利用js实现 Swiper 全屏自适应 图片轮播代码,利用js实现Swiper全屏自适应图片轮播代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/swiper.min.js"></script>

3. HTML代码

<section class="pc-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-center none-effect">
<a href="#">
<img src="img/banner001.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/banner002.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/banner003.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/banner004.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/banner005.jpg">
</a>
<div class="layer-mask"></div>
</div>
</div>
<div class="button">
<div class="swiper-button-pv"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<script type="text/javascript">
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
autoplay: false,
speed: 1000,
autoplayDisableOnInteraction: false,
loop: true,
centeredSlides: true,
slidesPerView: 2,
pagination: '.swiper-pagination',
paginationClickable: true,
pvButton: '.swiper-button-pv',
nextButton: '.swiper-button-next',
onInit: function(swiper) {
swiper.slides[2].className = "swiper-slide swiper-slide-active";
},
breakpoints: {
668: {
slidesPerView: 1,
}
}
});
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

演示地址下载地址

最新游戏