swiper(移动端触摸滑动插件)
tip:自己敲得Swiper 的小demo，可以复制粘贴看看效果哦。
swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Swiper demo</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><link rel="stylesheet" href="css/swiper.min.css"><style> html, body { position: relative; height: 100%;}body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0;}.swiper-container { width: 100%; height: 100%;}
.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; /*display: flex;*/ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; /*-webkit-align-items: center; align-items: center;*/}.swiper-pagination{ top: 0; height: 3rem; width: 100%; background-color: #386bdb; text-align: left;}.swiper-pagination-bullet{ width: 12%; height: 3rem; text-align: center; border-radius: 0; font-size: 1rem; line-height: 3rem; color: #fff; opacity: 0.6; background-color: transparent;}.swiper-pagination-bullet-active{ opacity: 1;}.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/ content:"热门";/*所插入的内容*/}.swiper-pagination-bullet:nth-child(2):before{ content:"关注";}.swiper-pagination-bullet:nth-child(3):before{ content:"话题";}.swiper-pagination-bullet:nth-child(4):before{ content:"问答";}
/*第一个swiper里的小swiper*/.swiper-container-h { width: 100%; height: 19.0rem; margin-top:3.5rem; background-color: pink; overflow: hidden;}.swiper-container-h>.swiper-wrapper{ margin: 30px 15px; height: 15.0rem;}.swiper-container-h>.swiper-wrapper>.swiper-slide{ background-color: #ccc; height: 15rem; line-height: 15rem;}/*第二屏*/.one{ height: 100%; width: 100%; /*background-color: #ccc;*/ margin-top: 3.5rem; line-height: 10rem;}.one1,.one2,.one3{ height: 10rem; width: 100%; background-color: pink; margin-top: .1em; line-height: 10rem;}/*第三屏*/.two{ height: 100%; width: 100%; background-color: pink; margin-top: 3.5rem;}</style></head><body><div class="swiper-container"> <div class="swiper-wrapper"> <!-- 热门 第一屏start --> <div class="swiper-slide"> <div class="swiper-container-h"> <div class="swiper-wrapper"> <div class="swiper-slide">雄</div> <div class="swiper-slide">的</div> <div class="swiper-slide">传</div> <div class="swiper-slide">说</div> </div></div></div><!-- 热门 第一屏end --><div class="swiper-slide"> <div class="one"> <div class="one1">1111</div> <div class="one2">2222</div> <div class="one3">3333</div> </div></div><div class="swiper-slide"> <div class="two">4444</div></div><div class="swiper-slide">问答</div></div><!-- tab栏的头部导航按钮 --><div class="swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div></div><script src="js/swiper.min.js"></script><script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, // spaceBetween: 50 }); var swiperH = new Swiper('.swiper-container-h', { // pagination: '.swiper-pagination', slidesPerView: 1.6,//屏幕显示小div的个数 paginationClickable: true, spaceBetween: 30, freeMode: true });</script></body></html>
转载于:https://www.cnblogs.com/520BigBear/p/7773207.html
相关资源：数据结构—成绩单生成器