TAB切换功能:既可以滑动又可以点击。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script> <style> *{box-sizing: border-box;margin: 0;padding: 0;} body{background-color: #f8f9fc;} .case-title{border-bottom: 1px solid #ddd;background-color: #fff;} .swiper-slide.case-tab{width: 150px;line-height: 50px;text-align: center;font-size: 16px;} .swiper-slide.case-tab.active-nav{color: #fd7b03} .swiper-slide.container{padding: 10px;height: 260px} .case-detail{height:100%;box-shadow: 0 3px 8px #ccc;padding: 10px 0 20px;background-color: #fff;} .case-name{font-size: 16px;color: 333;padding: 10px 15px} .case-des{color: #999;padding: 0 30px;} .swiper-slide.show-more{height:260px;display: flex;justify-content: center;align-items: center;color: #999} .vertical-text{width: 20px;display: inline-block;vertical-align: middle;} .icon-slide-more{display: inline-block;vertical-align: middle;font-style: normal;} </style> </head> <body> <div> <div class="swiper-container case-title" id="caseTitle" > <div class="swiper-wrapper"> <div class="case-tab swiper-slide active-nav">主题</div> <div class="case-tab swiper-slide">取景</div> <div class="case-tab swiper-slide">要素</div> </div> </div> <div id="caseContainer" style="width:100%"> <div class="swiper-wrapper"> <div class="swiper-slide container"> <div class="case-detail"> <h2 class="case-name">风景</h2> <p class="case-des">最普遍的摄影题材</p> <h2 class="case-name">人像</h2> <p class="case-des">最亲民的,没有之一</p> <h2 class="case-name">人文</h2> <p class="case-des">与人文相关的题材总容易引起共鸣</p> </div> </div> <div class="swiper-slide container"> <div class="case-detail"> <h2 class="case-name">场景</h2> <p class="case-des">直接影响照片好坏</p> <h2 class="case-name">角度</h2> <p class="case-des">换个角度看世界</p> <h2 class="case-name">取舍</h2> <p class="case-des">摄影是减法</p> </div> </div> <div class="swiper-slide container"> <div class="case-detail"> <h2 class="case-name">构图</h2> <p class="case-des">横向构图,三分构图,框式构图</p> <h2 class="case-name">曝光</h2> <p class="case-des">基本功</p> <h2 class="case-name">虚实</h2> <p class="case-des">突出主体,丰富层次</p> </div> </div> <div class="swiper-slide container show-more" style="width: 100px"> <div class="slide-more"> <p class="vertical-text">左滑查看更多</p> <i class="icon-slide-more">>></i> </div> </div> </div> </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ let swiper1 = new Swiper('#caseTitle',{ watchSlidesProgress : true, //开启这个参数来计算每个slide的progress(进度),以便判断是否最后一帧 watchSlidesVisibility : true, //为每个可见的slide增加一个classname:‘ swiper-slide-visible ’ slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量,'auto'则自动根据slides的宽度来设定数量 freeMode: true, //为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合 on:{ tap: function(){ //点击 tab 时,跳转相应的内容页 swiper2.slideTo( swiper1.clickedIndex) } } }) let swiper2 = new Swiper('#caseContainer',{ slidesPerView: 'auto', // 最后一帧宽度小,故设为自动识别 on:{ slideChangeTransitionStart: function(){ //内容页开始滑动时 响应导航栏 updateNavPosition() }, touchEnd: function(){ //左滑查看更多 let prg = this.progress //进度 let index = this.snapIndex, //当前序号 length = this.slides.length-1 //内容页 页数-1 if(prg>1 && index===length){ //判断处于最后一帧,且进度超过 1 (倒数第二帧滑动时也可能使进度超过1) // do something slideMore() } }, } }) function updateNavPosition(){ let pages = parseInt($('#caseTitle .swiper-slide').length) //导航栏数量 let currentContextIndex = swiper2.activeIndex //内容页活动页 let to = currentContextIndex>=pages?pages-1:currentContextIndex //内容页3,4页活动时都跳转至 导航栏的3页 $('#caseTitle .active-nav').removeClass('active-nav') $('#caseTitle .swiper-slide').eq(to).addClass('active-nav'); swiper1.slideTo(to) } function slideMore(){ console.log('到底了!') } }) </script> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: