我們昨天說了關於Angular的選項卡,那今天就說一下Swiper的選項卡吧! 今天的選項卡是Zepto結合Swiper的選項卡,咱麽明天再說純純的Swiper的吧! 既然是關於Zepto和Swiper的選項卡,那就說明瞭!要有關於Swiper和Zepto的插件, 分別是這兩個: zepto.min ...
我們昨天說了關於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>
就是這麼簡單,你學會了嗎?
