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

最新推荐文章于 2022-07-21 16:11:20 发布
最新推荐文章于 2022-07-21 16:11:20 发布
阅读量4.6k 收藏 1
点赞数 1
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010289111/article/details/78099388
版权
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 170 px ;
}    
.swiper-slide {
      width : 558 px ;
      }
.swiper-slide a {
      transition : 0.2 s ;
      }    
.swiper-pagination {
      text-align : center ;
      width : 100 % ;
      margin-top : 10 px ; }
.swiper-pagination .swiper-pagination-bullet {
    width : 12 px ;
    height : 12 px ;
      margin : 0 5 px ;
      background : #02328d ;
}
.swiper-button-prev {
      width : 32 px ;
      height : 92 px ;   
      background : url(../images/slide_prev.png) no-repeat center rgba ( 255 , 255 , 255 , .8 ) ;
      left : 200 px ;
    border-radius : 5 px ;
}
.swiper-button-next {
      width : 32 px ;
      height : 92 px ;   
      background : url(../images/slide_after.png) no-repeat center rgba ( 255 , 255 , 255 , .8 ) ;    
      right : 200 px ;
    border-radius : 5 px ;
}
.swiper-button-prev : hover , .swiper-button-next : hover {
      background-color : rgba ( 255 , 255 , 255 , 1 ) ;
}
.swiper-slide {
      width : 518 px ;
      height : 448 px ;
      background : url(../images/qiangBg-1.png) no-repeat center;
}
.swiper-slide > div {
      width : 518 px ;
      height : 448 px ;
      padding-top : 334 px ;
      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 : 310 px ;
      display : block ;
      margin : 0 auto ;
      padding-top : 143 px ;
}
.swiper-slide a {
      cursor : pointer ;
      display : block ;
      font-size : 34.25 px ;
      width : 309 px ;
      margin : 0 auto ;
      height : 66.5 px ;
      line-height : 66.5 px ;
      -moz-border-radius : 66.5 px ;
      -webkit-border-radius : 66.5 px ;
      border-radius : 66.5 px ;
      text-align : center;
      background-image : -webkit-linear-gradient ( to left , #fc8f4e , #f84b47 ) ;
    background-image : linear-gradient ( to left , #fc8f4e , #f84b47 ) ;
    -moz-box-shadow : 0 1 px 5 px 0 #f8e0e0 ;
    -webkit-box-shadow : 0 1 px 5 px 0 #f8e0e0 ;
    box-shadow : 0 1 px 5 px 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所占位出添加阴影块。
Annkeke
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Swiper遮罩弹出菜单手机特效特效代码
03-20
Swiper遮罩弹出菜单手机特效是一款jQuery基于Swiper制作的移动端text文本框点击遮罩弹出菜单列表，支持上下滑动菜单选择特效。
使用vue-awesome-swiper实现轮播图异形卡片化两侧切换显示一半的遮挡效果
zuo-yiran的博客
01-14 4457
vue 可以直接使用插件 效果如图： 主要设置如下： <swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions"> <swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`"> <div class="card-area"> 第{{index}}张swiper
vue swiper6.8.1用法 自动播放，无限循环，过度等
加油小伙子
07-31 1890
<template> <div class="index"> <div class="container"> <div class="swiper-box"> <swiper :space-between="30" navigation :effect="'cube'" :loop="true" :paginati.
swiper两边导航按钮定位被压住的解决办法
行如逆水行舟，不进则退
03-31 929
swiper两边导航按钮定位被压住的解决办法问题原因解决注意 问题 如图，swiper两边的导航按钮需要定位到父盒子外面时，被压住 原因 是因为swiper的容器盒子swiper-container里也有相对定位 解决 我们需要把swiper的容器盒子swiper-container改成静态定位 .swiper-container { position: static; } 注意 我们在用swiper-container的时候最好嵌套在你需要swiper的盒子里面，不要直接给这个父盒子添加swip
swiper子项可滚动
qq_41340792的博客
05-21 1660
swiper-slide里嵌套滚动容器 【注】:需要滚动的slide的样式要添加 overflow-y:scroll;否则不生效 `this.swiper.slides.on('touchstart', function (e) { startScroll = this.scrollTop; touchStart = e.targetTouches[0].pageY; }, true); th.
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
js使用swiper实现层叠轮播效果实例代码
12-09
方案：查找了下发现使用swiper的切换效果coverflowEffect可以实现 　1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 　2.coverflow的属性： 　rotate：slide做3d旋转时Y轴的旋转角度。默认50...
微信小程序实现卡片层叠滑动效果
10-16
主要为大家详细介绍了微信小程序实现卡片层叠滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
swiper 一侧或两侧露出一小部分
edwardwzw的博客
07-21 1497
swiper 日常用法
异常处理——scroll-view滚动时遮挡其他组件
番薯大佬的专栏
04-27 3831
WeChat小程序交流（QQ群：769977169）页面组件分为上下两部分，上部分组件是view导航标题，下部分是scroll-view内容组件；scroll-view组件向上滚动时，出现遮挡了导航标题的情况。造成这种情况的原因是，采用自动适配计算scroll-view的高度时，高度计算错误导致的。onReady: function () { var thisBlock = this; ...
Swiper遮罩弹出菜单手机特效.rar
07-16
使用JQ取对应的vid参数值的时候$("input[name='对应的name名称']").attr('value'); 如果用.val会直接取到中文值
带遮罩层弹出框展示图片插件
08-13
带遮罩层弹出框展示图片插件 相册播放 弹出层对照片进行选择查看
swiper实现无缝轮播 中间显示主图 两边显示部分
热门推荐
weixin_41544124的博客
01-04 1万+
现在有很多轮播的效果都是中间显示主图，两边显示部分图片的效果，用swiper实现其实很容易，先上效果图 css实时很简单 给swiper-wrapper宽度设置成100%；swiper-slide设置成80%就可以两边显示部分了 html &lt;div id="slide"&gt; &lt;div cl...
swiper2个常用用法3D覆盖和左右留白
weixin_41978390的博客
04-17 7717
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/title&gt; &
swiper 实现移动端两侧露一半轮播图
wwz123124的博客
06-29 7525
CSS 控制 swiper-slide 样式-滑动子元素样式，设置宽度和间隔（通过spaceBetween: 50,属性设置的是通过margin-righ实现的，效果非常之low） .swiper-slide { width: 60%; padding:0 2rem!important; } HTML是标准结构，可以在swiper官网找到 ...
js实现遮罩层幻灯片轮播效果
CodingNoob
08-28 1646
效果如下：代码（需要引入jquery）如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
canvas实现遮罩效果
Coding&Sharing
08-11 7908
今天做的一个网页要实现图片以平行四边形的样子展现出来，但是切图的时候要切成普通的图片，想了很久，最后是通过canvas绘制两个三角形来完成遮罩的效果。 最终效果图：提供的素材图片 好了，那么开始实现这种效果了1 . 将页面的结构写好，两个三角形的canvas画布和一张图片<div class="m-img"> <canvas id="m-triangle2" width="
小程序swiper组件修改默认指示点
前端_李嘉豪
10-12 6473
html <view class="swiper-container"> <swiper autoplay="auto" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurre...
Swiper实现视频上下滑动
最新发布
05-31
要在视频上下滑动，可以使用Swiper组件，具体实现步骤如下： 1. 引入Swiper组件和视频组件。 2. 在Swiper组件内部嵌套视频组件，设置视频的高度和宽度，以及视频源地址。 3. 设置Swiper组件的direction属性为'vertical'，即可实现视频的上下滑动。 示例代码如下： ```html <swiper direction="vertical"> <swiper-slide> <video src="视频源地址" width="100%" height="100%"></video> </swiper-slide> <swiper-slide> <video src="视频源地址" width="100%" height="100%"></video> </swiper-slide> <swiper-slide> <video src="视频源地址" width="100%" height="100%"></video> </swiper-slide> </swiper> ``` 注意：在实际开发中，需要根据具体需求进行样式和功能的调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值