Swiper轮播凸显效果实现效果如下：
程序结构如下：
话不多说，直接上代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>swiper运⽤</title>
<link type="text/css" rel="stylesheet" href="../css/swiper.css"> <link type="text/css" rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/swiper.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script> </head>
<body>
<div class="photo">
以的用法
<div class="swiper-container">
<div class="swiper-wrapper">
有何专长<div class="swiper-slide">
<img src="../images/01.jpg">
<p>第01张</p>
</div>
<div class="swiper-slide">
<img src="../images/02.jpg">
<p>第02张</p>
</div>
<div class="swiper-slide">
<img src="../images/03.jpg">
<p>第03张</p>
</div>
<div class="swiper-slide">
<img src="../images/04.jpg">
<p>第04张</p>
</div>
<div class="swiper-slide">
<img src="../images/05.jpg">
<p>第05张</p>
并蒂莲
产品项目</div>
<div class="swiper-slide">
<img src="../images/06.jpg">
<p>第06张</p>
</div>
<div class="swiper-slide">
<img src="../images/07.jpg">
<p>第07张</p>
</div>
<div class="swiper-slide">
<img src="../images/08.jpg">
<p>第08张</p>
</div>
<div class="swiper-slide">
<img src="../images/09.jpg">
<p>第09张</p>
薄谷来
</div>
<div class="swiper-slide">
<img src="../images/10.jpg">
<p>第10张</p>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="../js/index.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
}
body {
background: #eeeeee; }
.photo {
width: 850px;
height: 145px;
text-align: center;
margin: 200px auto;
background: deeppink; }
.photo .swiper-slide > img { width: 100px;
height: 100px;
margin-top: 10px;
}
.swiper-container {
overflow: visible;
}
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
.
opacity_3 {
opacity: 0.3 !important; }
.opacity_10 {
opacity: 1 !important;
}
index.js拘役和管制有什么区别
function swiperAutoPlay() {
$('.photo .swiper-wrapper .swiper-slide:gt(5)').addClass('opacity_3'); //:gt(num)也是⼀种选择器
var photosLength = $('.photo .swiper-wrapper .swiper-slide').length;
var mySwiper = new Swiper('.swiper-container', {
initialSlide: 0, //默认从第⼏张图⽚开始，初始值为：0
on: {
菠萝炒饭的做法
// 点击左右按钮触发⽅法
slidePrevTransitionStart: function () {
for (var i = 0; i < photosLength; i++) {
$('.photo .swiper-wrapper .swiper-slide').eq(i).addClass('opacity_3').removeClass('opacity_10'); }
自动挡驾照
for (var j = this.activeIndex; j < this.activeIndex + 6; j++) {
$('.photo .swiper-wrapper .swiper-slide').eq(j).addClass('opacity_10').removeClass('opacity_3'); }
},
slideNextTransitionStart: function () {
for (var i = 0; i < photosLength; i++) {
$('.photo .swiper-wrapper .swiper-slide').eq(i).addClass('opacity_3').removeClass('opacity_10'); }
for (var j = this.activeIndex; j < this.activeIndex + 6; j++) {
$('.photo .swiper-wrapper .swiper-slide').eq(j).addClass('opacity_10').removeClass('opacity_3'); }
},
},
navigation: {
// 左右按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 6, //同时能够显⽰的数量
slidesPerGroup: 1, //设置⼏张图⽚为⼀组
});
}
swiperAutoPlay();
本⽂使⽤库相关链接:
，提取码：z5bq。
，提取码：e9ed。
，提取码：cqh0。
