Swiper实现带两侧带遮罩层的滑动效果

来源：互联网发布：java开方运算式编辑：程序博客网时间：2024/05/22 08:04

swiper 3我原来采用的是swiper3实现的

主要代码我po一下

html:

<divclass="swiper-container">

<divclass="swiper-wrapper">

<divclass="swiper-slide swiper-slide-1">

<div>

<aclass="btn-disableQ">每天10:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-2">

<div>

<aclass="btn-disableQ">每天13:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-3">

<div>

<aclass="btn-disableQ">每天17:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-4">

<div>

<aclass="btn-disableQ">每天20:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-button-prev"></div>

<divclass="swiper-button-next"></div>

</div>

css：

.swiper-container{

margin:0170px;

}

.swiper-slide{

width:558px;

}

.swiper-slidea{

transition:0.2s;

}

.swiper-pagination{

text-align:center;

width:100%;

margin-top:10px;}

.swiper-pagination.swiper-pagination-bullet{

width:12px;

height:12px;

margin:05px;

background:#02328d;

}

.swiper-button-prev{

width:32px;

height:92px;

background:url(../images/slide_prev.png)no-repeatcenterrgba(255,255,255,.8);

left:200px;

border-radius:5px;

}

.swiper-button-next{

width:32px;

height:92px;

background:url(../images/slide_after.png)no-repeatcenterrgba(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-repeatcenter;

}

.swiper-slide>div{

width:518px;

height:448px;

padding-top:334px;

background:url(../images/qiangBg-gray2.png)no-repeatcenter;

}

.swiper-slide.nobg>div{

background:none;

}

.swiper-slide-2{

background:url(../images/qiangBg-2.png)no-repeatcenter;

}

.swiper-slide-3{

background:url(../images/qiangBg-3.png)no-repeatcenter;

}

.swiper-slide-4{

background:url(../images/qiangBg-4.png)no-repeatcenter;

}

.qiang.box.innerimg{

width:310px;

display:block;

margin:0auto;

padding-top:143px;

}

.swiper-slidea{

cursor:pointer;

display:block;

font-size:34.25px;

width:309px;

margin:0auto;

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(toleft,#fc8f4e,#f84b47);

background-image:linear-gradient(toleft,#fc8f4e,#f84b47);

-moz-box-shadow:01px5px0#f8e0e0;

-webkit-box-shadow:01px5px0#f8e0e0;

box-shadow:01px5px0#f8e0e0;

}

.swiper-slidea.btn-ableQ{

display:none;

}

.swiper-slidea.btn-disableQ{

background:#ccc;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:none;

}

js：

varswiper= newSwiper('.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');

varas=$('.swiper-wrapper').find('.swiper-slide').eq(swiper.activeIndex).addClass('nobg')

});

</script>

但是swiper3存在兼容ie9的问题

因而改用了swiper 2实现这个

html：

<divclass="swiper-container">

<divclass="swiper-button-prev"></div>

<divclass="swiper-button-next"></div>

<divclass="swiper-wrapper">

<divclass="swiper-slide swiper-slide-1">

<div>

<aclass="btn-disableQ">每天10:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-2 nobg">

<div>

<aclass="btn-disableQ">每天13:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-3">

<div>

<aclass="btn-disableQ">每天17:00</a>

<aclass="btn-ableQ">立即抢</a>

</div>

<divclass="swiper-slide swiper-slide-4">

<div>

<aclass="btn-disableQ">每天20:00</a>

<aclass="btn-ableQ">立即抢</a>

</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有稍许变化:

varswiper= newSwiper('.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所占位出添加阴影块。

阅读全文

0 0