Zepto结合Swiper的选项卡

Posted on 2017-06-23 15:04  ITandYT  阅读(1499)  评论(0)  编辑  收藏  举报

我们昨天说了关于Angular的选项卡,那今天就说一下Swiper的选项卡吧!

今天的选项卡是Zepto结合Swiper的选项卡,咱么明天再说纯纯的Swiper的吧!

既然是关于Zepto和Swiper的选项卡,那就说明了!要有关于Swiper和Zepto的插件,

分别是这两个:

zepto.min.js

swiper.min.js

还有swiper.min.css

 

就是这三个,

分别针对于布局,事件,和滑动效果哦!   好!话不多说,翠花,上代码:

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
　　　　　　　　//此乃移动端的标签
  6         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7         <title>选项卡哦!</title>
  8 
  9         <link rel="stylesheet" href="js/swiper/swiper.min.css" />
 10 
 11         <style type="text/css">
 12             * {
 13                 margin: 0;
 14                 padding: 0;
 15                 font-family: "微软雅黑";
 16             }
 17             
 18             .wrap {
 19                 margin: 0 auto;
 20             }
 21             
 22             .tabs {
 23                 height: 32px;
 24                 background: #5AA9F3;
 25                 width: 100%;
 26                 padding-top: 8px;
 27                 text-align: center
 28             }
 29             
 30             .tabs .part {
 31                 display: block;
 32                 float: left;
 33                 width: 33%;
 34                 color: #fff;
 35                 text-align: center;
 36                 height: 20px;
 37             }
 38             
 39             .tabs .part:first-child {
 40                 border-right: 1px solid #ADDAFD;
 41             }
 42             /*这些是等待被操作的样式哦!*/
 43             .tabs a {
 44                 width: 70px;
 45                 display: block;
 46                 color: #fff;
 47                 text-align: center;
 48                 margin: 0 auto;
 49                 font-size: 16px;
 50                 text-decoration: none;
 51                 padding-bottom: 2px;
 52             }
 53             
 54             .tabs span.active a {
 55                 color: #fff;
 56                 border-bottom: 2px solid #fff;
 57             }
 58             
 59             .swiper-container {
 60                 width: 100%;
 61                 border-top: 0;
 62                 margin-top: 10px!important
 63             }
 64             
 65             .swiper-slide {
 66                 width: 100%;
 67                 background: none;
 68                 color: #373737;
 69             }
 70             
 71             p {
 72                 text-align: center;
 73             }
 74         </style>
 75 
 76     </head>
 77 
 78     <body class="bgc_gray">
 79         <div class="pg-main">
 80             <div id="wrapper">
 81                 <div class="wrap">
 82                     <div class="tabs">
　　　　　　　　　　　　　　　　//三个选项
 83                         <span class="part active">
 84                             <a href="#" hidefocus="true" >全免费</a>
 85                         </span>
 86                         <span class="part" style="border-right: 1px solid #ADDAFD">
 87                             <a href="#" hidefocus="true">优惠券</a>
 88                         </span>
 89                         <span class="part">
 90                             <a href="#" hidefocus="true">个人免费</a>
 91                         </span>
 92                     </div>
 93 
 94                     <div class="swiper-container">
 95                         <div class="swiper-wrapper">
 96                             <div class="swiper-slide swiper-slide-visible swiper-slide-active">
 97                                 <!--滑动区-->
 98                                 <div class="content-slide">
 99                                     <p>这位朋友</p>
100                                     <p>请在此稍作停留</p>
101                                     <p>你今天身上有卦 别怕</p>
102                                     <p>给我看看你的手</p>
104                                     <p>胡说八道</p>
105                                     <p>葫芦里卖的什么药</p>
106                                     <p>不过是江湖圈套 可笑</p>
107                                     <p>让警察把你赶跑</p>
108                                 </div>
109                             </div>
110                             <div class="swiper-slide">
111                                 <div class="content-slide">
112                                     <p>恕我直言</p>
113                                     <p>你夜晚无法安眠</p>
114                                     <p>你遇到一个梦魇</p>
115                                     <p>每天 什么藏在你床边</p>
116                                     <p>话音刚落</p>
117                                     <p>我已被冷汗浸透</p>
118                                     <p>他说的一点不错 拜托</p>
119                                     <p>请你一定救救我</p>
120                                 </div>
121                             </div>
122                             <div class="swiper-slide">
123                                 <div class="content-slide">
124                                     <p>我銕口直断 为你消灾解难</p>
125                                     <p>阴阳自在我心间 与天地周旋</p>
126                                     <p>一生神机妙算 只有自己看不穿</p>
127                                     <p>你荣华富贵在我 我生死有命在天</p>
128                                 </div>
129                             </div>
130                         </div>
131                     </div>
132                 </div>
133             </div>
134         </div>
135 
136         <script type="text/javascript" src="js/zepto.min.js"></script>
137         <script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>
138         <script type="text/javascript">
139             $(function() {
140 　　　　　　　　　　//获取 Swiper轮播图
141                 var tabsSwiper;
142                 tabsSwiper = new Swiper('.swiper-container', {
143                     speed: 500,
144                     onSlideChangeStart: function() {
　　　　　　　　　　　　　　　　//zepto操作DOM节点 删除类名
145                         $(".tabs .active").removeClass('active');
146                         $(".tabs span").eq(tabsSwiper.activeIndex).addClass('active');
147                     }
148                 });
　　　　　　　　　　　　　　　　//删除或添加类名
149                 $(".tabs span").on('touchstart mousedown', function(e) {
　　　　　　　　　　　　　　　　//阻止默认事件
150                     e.preventDefault()
151                     $(".tabs .active").removeClass('active');
152                     $(this).addClass('active');
153                     tabsSwiper.swipeTo($(this).index());
154 
155                 });
　　　　　　　　　　　　/给上面的三个选项添加点事件!
156                 $(".tabs span").click(function(e) {
　　　　　　　　　　　　　　　　//阻止默认事件
157                     e.preventDefault();
158                 });
159 
160             }); //end
161         </script>
162     </body>
163 
164 </html>

就是这么简单,你学会了吗?