Heim > Artikel > Web-Frontend > Einführung in Tabs in Swiper
Einführung in Tabs in Swiper
- 零下一度Original
- 2017-06-25 09:43:271566Durchsuche
Wir haben gestern über die Tabs von Angular gesprochen, also reden wir heute über die Tabs von Swiper
Die Tabs von heute sind Zepto in Kombination mit den Tabs von Swiper, lasst uns morgen über reine Swiper reden! Es ist ein Tab über Zepto und Swiper, das ist es! Es muss Plugins für Swiper und Zepto geben,
Das sind diese beiden:
zepto.min.js
swiper.min.js
und swiper.min.css
Dies sind die drei,
Zielt jeweils auf Layout, Ereignisse und Gleiteffekte ab ! Okay! Ohne weitere Umschweife, Cuihua, hier ist der Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
//此乃移动端的标签 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>选项卡哦!</title> <link rel="stylesheet" href="js/swiper/swiper.min.css?1.1.11" /> <style type="text/css"> * margin: 0 padding: 0 font-family: "微软雅黑" margin: 0 width: 100% padding- text- width: 33% text- .tabs .part:first- border- /*这些是等待被操作的样式哦!*/ text- margin: 0 font- text- padding- border- .swiper- width: 100% border-top: 0 margin-top: 10px! .swiper- width: 100% color: #373737 text- </style> </head> <body class="bgc_gray"> <div class="pg-main"> <div id="wrapper"> <div class="wrap"> <div class="tabs">
//三个选项 <span class="part active"> <a href="#" hidefocus="true" >全免费</a> </span> <span class="part" style="border-right: 1px solid #ADDAFD"> <a href="#" hidefocus="true">优惠券</a> </span> <span class="part"> <a href="#" hidefocus="true">个人免费</a> </span> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-visible swiper-slide-active"> <!--滑动区--> <div class="content-slide"> <p>这位朋友</p> <p>请在此稍作停留</p> <p>你今天身上有卦 别怕</p> <p>给我看看你的手</p> <p>胡说八道</p> <p>葫芦里卖的什么药</p> <p>不过是江湖圈套 可笑</p> <p>让警察把你赶跑</p> </div> </div> <div class="swiper-slide"> <div class="content-slide"> <p>恕我直言</p> <p>你夜晚无法安眠</p> <p>你遇到一个梦魇</p> <p>每天 什么藏在你床边</p> <p>话音刚落</p> <p>我已被冷汗浸透</p> <p>他说的一点不错 拜托</p> <p>请你一定救救我</p> </div> </div> <div class="swiper-slide"> <div class="content-slide"> <p>我銕口直断 为你消灾解难</p> <p>阴阳自在我心间 与天地周旋</p> <p>一生神机妙算 只有自己看不穿</p> <p>你荣华富贵在我 我生死有命在天</p> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/zepto.min.js?1.1.11"></script> <script type="text/javascript" src="js/swiper/idangerous.swiper.min.js?1.1.11"></script> <script type="text/javascript"> $( //获取 Swiper轮播图 tabsSwiper = Swiper('.swiper-container' speed: 500 onSlideChangeStart: $(".tabs .active").removeClass('active' $(".tabs span").eq(tabsSwiper.activeIndex).addClass('active' $(".tabs span").on('touchstart mousedown', $(".tabs .active").removeClass('active' $().addClass('active' tabsSwiper.swipeTo($( $(".tabs span").click( }); </script> </body> </html>So einfach ist das, du hast es gelernt?Das obige ist der detaillierte Inhalt vonEinführung in Tabs in Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn