關於Swiper的選項卡介紹
我們昨天說了關於Angular的選項卡,那今天就說一下Swiper的選項卡吧!
今天的選項卡是Zepto結合Swiper的選項卡,咱麼明天再說純純的Swiper的吧!
既然是關於Zepto和Swiper的選項卡,那就說明了!要有關於Swiper和Zepto的插件,
分別是這兩個:
#zepto.min.js
swiper.min.js
還有swiper.min.css
就是這三個,
分別針對於佈局,事件,和滑動效果哦! 好!話不多說,翠花,上代碼:
<!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>就是這麼簡單,你學會了嗎?
以上是關於Swiper的選項卡介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
