特效描述：利用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>

下载地址

立即下载

1.《Swiper全屏自适应图片轮播代码》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《Swiper全屏自适应图片轮播代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/focus/342.html