js轮播图实现简单代码_swiper插件实现简单的层叠轮播图

首先登陆swiper官网https://www.swiper.com.cn/下载对应的swiper js和css文件，在html文件中引入即可。

HTML代码：

swiper轮播图

css文件：

body{

margin:0;

padding: 0;

}

#certify {

position: relative;

width: 1123px;

margin: 60px auto

}

#certify .swiper-container {

padding-bottom: 60px;

}

#certify .swiper-slide {

width: 641px;

height: 347px;

background: #fff;

border:1px solid #c2c2c2;

}

#certify .swiper-slide img{

width: 637px;

height: 343px;

display:block;

border:2px solid #fff;

}

#certify .swiper-pagination {

width: 100%;

bottom: 20px;

}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {

margin: 0 5px;

border: 3px solid #fff;

background-color: #d5d5d5;

width: 10px;

height: 10px;

opacity: 1;

}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {

border: 3px solid #00aadc;

background-color: #fff;

}

#certify .swiper-button-prev {

left: 140px;

width: 60px;

height: 111px;

top:133px;

background: url(../images/lunbo_17.png) no-repeat;

background-size: 100%;

}

#certify .swiper-button-next {

right: 140px;

width: 60px;

height: 111px;

top:133px;

background: url("../images/lunbo_20.png") no-repeat;

background-size: 100%;

}

效果图：(图片换成自己需要的就可以，再加个a标签就完美了)