Swiper实现带两侧带遮罩层的滑动效果
swiper 3我原来采用的是swiper3实现的
主要代码我po一下
html:
<div
class="swiper-container">
<div
class="swiper-wrapper">
<div
class="swiper-slide
swiper-slide-1">
<div>
<a
class="btn-disableQ">每天10:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-2">
<div>
<a
class="btn-disableQ">每天13:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-3">
<div>
<a
class="btn-disableQ">每天17:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-4">
<div>
<a
class="btn-disableQ">每天20:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
</div>
<div
class="swiper-button-prev"></div>
<div
class="swiper-button-next"></div>
</div>
css：
.swiper-container{
margin:
0
170px;
}
.swiper-slide{
width:558px;
}
.swiper-slide
a{
transition:
0.2s;
}
.swiper-pagination{
text-align:center;
width:100%;
margin-top:10px;}
.swiper-pagination
.swiper-pagination-bullet
{
width:
12px;
height:
12px;
margin:0
5px;
background:#02328d;
}
.swiper-button-prev{
width:
32px;
height:
92px;
background:
url(../images/slide_prev.png)
no-repeat
center
rgba(255,255,255,.8);
left:
200px;
border-radius:
5px;
}
.swiper-button-next{
width:
32px;
height:
92px;
background:
url(../images/slide_after.png)
no-repeat
center
rgba(255,255,255,.8);
right:
200px;
border-radius:
5px;
}
.swiper-button-prev:hover,.swiper-button-next:hover{
background-color:
rgba(255,255,255,1);
}
.swiper-slide{
width:
518px;
height:
448px;
background:
url(../images/qiangBg-1.png)
no-repeat
center;
}
.swiper-slide>div{
width:
518px;
height:
448px;
padding-top:
334px;
background:
url(../images/qiangBg-gray2.png)
no-repeat
center;
}
.swiper-slide.nobg>div{
background:
none;
}
.swiper-slide-2{
background:
url(../images/qiangBg-2.png)
no-repeat
center;
}
.swiper-slide-3{
background:
url(../images/qiangBg-3.png)
no-repeat
center;
}
.swiper-slide-4{
background:
url(../images/qiangBg-4.png)
no-repeat
center;
}
.qiang
.box
.inner
img{
width:
310px;
display:
block;
margin:
0
auto;
padding-top:
143px;
}
.swiper-slide
a{
cursor:
pointer;
display:
block;
font-size:
34.25px;
width:
309px;
margin:
0
auto;
height:
66.5px;
line-height:
66.5px;
-moz-border-radius:
66.5px;
-webkit-border-radius:
66.5px;
border-radius:
66.5px;
text-align:
center;
background-image:
-webkit-linear-gradient(to
left,
#fc8f4e,
#f84b47);
background-image:
linear-gradient(to
left,
#fc8f4e,
#f84b47);
-moz-box-shadow:
0
1px
5px
0
#f8e0e0;
-webkit-box-shadow:
0
1px
5px
0
#f8e0e0;
box-shadow:
0
1px
5px
0
#f8e0e0;
}
.swiper-slide
a.btn-ableQ{
display:
none;
}
.swiper-slide
a.btn-disableQ{
background:
#ccc;
-moz-box-shadow:
none;
-webkit-box-shadow:
none;
box-shadow:
none;
}
js：
<script>
var
swiper
= new
Swiper('.swiper-container',{
autoplay:3000,
loop:true,
loopedSlides:3,
spaceBetween:0,
centeredSlides:true,
slidesPerView
:
'auto',
nextButton:
'.swiper-button-next',
prevButton:
'.swiper-button-prev',
onSlideChangeStart:
function(swiper){
$('.swiper-wrapper').find('.swiper-slide').eq(swiper.activeIndex).siblings().removeClass('nobg');
var
as=$('.swiper-wrapper').find('.swiper-slide').eq(swiper.activeIndex).addClass('nobg')
},
});
</script>
但是swiper3存在兼容ie9的问题
因而改用了swiper 2实现这个
html：
<div
class="swiper-container">
<div
class="swiper-button-prev"></div>
<div
class="swiper-button-next"></div>
<div
class="swiper-wrapper">
<div
class="swiper-slide
swiper-slide-1">
<div>
<a
class="btn-disableQ">每天10:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-2 nobg">
<div>
<a
class="btn-disableQ">每天13:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-3">
<div>
<a
class="btn-disableQ">每天17:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
<div
class="swiper-slide
swiper-slide-4">
<div>
<a
class="btn-disableQ">每天20:00</a>
<a
class="btn-ableQ">立即抢</a>
</div>
</div>
</div>
</div>
css：
.swiper-container{
margin: 0 170px;
height: 448px;
}
.swiper-slide{
width:558px;
}
.swiper-slide a{
transition: 0.2s;
}
.swiper-pagination{
text-align:center;
width:100%;
margin-top:10px;}
.swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
margin:0 5px;
background:#02328d;
}
.swiper-button-prev{
width: 32px;
height: 92px;
background: url(../images/slide_prev.png) no-repeat center rgba(255,255,255,.8);
left: 200px;
border-radius: 5px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -46px;
cursor: pointer;
}
.swiper-button-next{
width: 32px;
height: 92px;
background: url(../images/slide_after.png) no-repeat center rgba(255,255,255,.8);
right: 200px;
border-radius: 5px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -46px;
cursor: pointer;
}
.swiper-button-prev:hover,.swiper-button-next:hover{
background-color: rgba(255,255,255,1);
}
.swiper-slide{
width: 518px;
height: 448px;
background: url(../images/qiangBg-1.png) no-repeat center;
}
.swiper-slide>div{
width: 100%;
height: 448px;
padding-top: 334px;
background: url(../images/qiangBg-gray2.png) no-repeat center;
}
.swiper-slide.nobg>div{
background: none;
}
.swiper-slide-2{
background: url(../images/qiangBg-2.png) no-repeat center;
}
.swiper-slide-3{
background: url(../images/qiangBg-3.png) no-repeat center;
}
.swiper-slide-4{
background: url(../images/qiangBg-4.png) no-repeat center;
}
.qiang .box .inner img{
width: 310px;
display: block;
margin: 0 auto;
padding-top: 143px;
}
.swiper-slide a{
cursor: pointer;
display: block;
font-size: 34.25px;
width: 309px;
margin: 0 auto;
height: 66.5px;
line-height: 66.5px;
-moz-border-radius: 66.5px;
-webkit-border-radius: 66.5px;
border-radius: 66.5px;
text-align: center;
background-image: -webkit-linear-gradient(to left, #fc8f4e, #f84b47);
background-image: linear-gradient(to left, #fc8f4e, #f84b47);
-moz-box-shadow: 0 1px 5px 0 #f8e0e0;
-webkit-box-shadow: 0 1px 5px 0 #f8e0e0;
box-shadow: 0 1px 5px 0 #f8e0e0;
}
.swiper-slide a.btn-ableQ{
display: none;
}
.swiper-slide a.btn-disableQ{
background: #ccc;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
js有稍许变化:
<script>
var
swiper
= new
Swiper('.swiper-container',{
autoplay:
3000,
slidesPerView
:
3,
loop:
true,
loopAdditionalSlides:2,
autoplayDisableOnInteraction:false,
onSlideChangeStart:
function(swiper){
$('.swiper-wrapper').find('.swiper-slide').eq(swiper.activeIndex).next().addClass('nobg')
$('.swiper-wrapper').find('.swiper-slide').eq(swiper.activeIndex).next().siblings().removeClass('nobg');
},
});
$('.swiper-button-prev').on('click',
function(e){
e.preventDefault()
swiper.swipePrev()
})
$('.swiper-button-next').on('click',
function(e){
e.preventDefault()
swiper.swipeNext()
})
</script>
效果还是如上图一样但是感觉要稍微卡顿一些的。
最后还是有问题及时兼容了Ie9了就是存在于切换完一轮以后对中间状态的判定谁应该是亮色的由于active状态的是第一张
然后用了没这么优雅的效果就是用aboslute给两边slide所占位出添加阴影块。