老習慣，廢話不多說，直接上代碼
1.PC端，swiper2，滑動效果
先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js（需要先引入jquery類庫）；
(1)html文件內容：
<!-- 如果需要在圖片可視區的周圍添加一些樣式，需要在外層套上一層<div> --> <div class="mywrapper"> <!-- 圖片可視區 --> <div class="swiper-container"> <!-- 包裹圖片的父級元素 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="../img/slide1.png" alt=""></div> <div class="swiper-slide"><img src="../img/slide2.png" alt=""></div> <div class="swiper-slide"><img src="../img/slide3.png" alt=""></div> </div> <!-- 前進和后退按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <!-- 放在外部的分頁器容器 --> <div class="nav"> <!-- 圖片對應的分頁器 --> <div class="swiper-pagination"></div> </div> <!-- 文本容器 --> <ul class="text"> <li class="active">輕松查看所有交易記錄，對賬簡潔方便</li> <li>支持被掃支付，更快更方便，收款從此無憂</li> <li>被掃交易完成結果自動彈出，自動退出，減少更多操作</li> </ul>
(2)less文件內容：
.swiper-container-wrapper { /* 設置圖片可視區的外層<div>的樣式 */ width: 906px; height: 570px; margin: 50px auto; paddding-top: 20px; box-sizing: border-box; .bgImg('/swiper_container.png'); .bgSize(100, 100%); /* 因為后面將帶有絕對定位屬性的前進和后退按鈕放在了圖片可視區的外面，所以需要給外層<div>添加相對定位 */ position: relative; /* 設置圖片可視區內的樣式 */ .swiper-container { /* 設置圖片可視區的寬高，因為自帶了margin: 0 auto; 所以會在外層<div>里水平居中*/ width: 626px; height: 470px; .swiper-wrapper { .swiper-slide { /* 不用管.swiper-wrapper和.swiper-slide，只需要設置里面的圖片樣式 */ img { width: 626px; height: 470px; } } } } /* 設置后退按鈕的樣式 */ .swiper-button-prev { width: 40px; height: 80px; .bgImg('/swiper_prev.png'); .bgSize(100, 100%); position: absolute; left: 0; top: 50%; margin-top: -60px; } /* 設置前進按鈕的樣式 */ .swiper-button-next { width: 40px; height: 80px; .bgImg('/swiper_next.png'); .bgSize(100, 100%); position: absolute; right: 0; top: 50%; margin-top: -60px; } } .nav { /* 因為分頁器自帶絕對定位屬性，所以需要給它的父級元素添加相對或者絕對定位屬性，並且給予一個固定的高度 */ position: relative; height: 50px; .swiper-pagination { /* 設置分頁器的樣式，水平居中，清除浮動 */ width: 906px; padding-left: 105px; box-sizing: border-box; .clearFl; /* 設置每一個分頁按鈕的樣式 */ .swiper-pagination-switch { .fl; width: 100px; height: 30px; font-size: 20px; color: #999; margin-right: 100px; cursor: pointer; } /* 設置每一個分頁按鈕被選中時的樣式 */ .swiper-active-switch { color: #000; } } } /* 設置圖片對應的文本內容的樣式 */ .text { position: relative; height: 50px; li { width: 400px; position: absolute; left: 50%; margin-left: -200px; top: 0; font-size: 20px; opacity: 0; line-height: 35px; &.active { opacity: 1; } } }
(3)js文件內容：
$(function(){ // 實例化mySwiper對象 var mySwiper = new Swiper ('.swiper-container',{ initialSlide: 0 , //設置初始化時slide的索引，默認0 autoplay: 2000, // 設置自動切換的時間間隔，默認0 speed: 3000, // 設置滑動速度，默認為300 loop: true, // 是否開啟無縫輪播，默認false loopAdditionalSlides: 0, // 設置loop模式下在slides前后復制若干個slide，默認為0，即前后各復制一個(0,1,2 --> 2,0,1,2,0) slidesPerView: 1, //設置slider容器能夠同時顯示的slides數量，默認為1，如果要選auto還需設置loopedSlides參數 slidesPerGroup: 1, //設置上述情況下slides的數量多少為一組，默認為1, useCSS3Transforms: false, // 不想使用css3 transforms來設定slide的位移而是使用wrapper的left/top屬性則可以將此參數設置為false DOMAnimation: true, // 在不支持css transitions(IE7-9)的瀏覽器上是否使用自定義的DOM動畫，默認為true, pagination: '.swiper-pagination', //定義分頁器，默認會在這個分頁器里面生成與slide對應的<span>標簽，要求類型是css選擇器或者HTML標簽 paginationClickable: true, // 當值為true時，點擊分頁器的指示點時會發生Swiper autoplayDisableOnInteraction: false, // 用戶操作swiper之后，是否禁止autoplay，默認為true onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換后的slide索引值 // 同步改變每個分頁器對應的在輪播圖之外的內容 var idx = swiper.activeIndex - 1; var textArr = $('.text li',$('.figure_wrap')); textArr.eq(idx).addClass('active').siblings().removeClass('active'); // 由於每次切換的時候，類名會自動替換，最開始追加的自定義類名會消失，所以需要在這里重新追加 var switchArr = $('.swiper-pagination span'); switchArr.each(function(idx,ele){ $(this).addClass('bullet'+idx); }) }, freeMode :false, // 若為true則是自由模式，不會自動貼合滑動位置 noSwiping: false, // 設為true時，可以在slide上增加類名'swiper-no-swiping'，使該slide無法滑動 simulateTouch: true, // 默認為true，Swiper接受鼠標點擊、拖動。 followFinger: false, // 如設置為false，拖動slide時它不會動，當你釋放時slide才會切換 } // 自定義分頁器里面的文本內容，有時需要給每個選項追加新的類名 var switchArr = $('.swiper-pagination span'); switchArr.eq(0).text('第一個分頁按鈕').addClass('bullet0') ; switchArr.eq(1).text('第二個分頁按鈕').addClass('bullet1') ; switchArr.eq(2).text('第三個分頁按鈕').addClass('bullet2') ; // 自定義前進和后退按鈕 $('.swiper-button-prev').on('click',function(){ mySwiper.swipePrev(); }) $('.swiper-button-next').on('click',function(){ mySwiper.swipeNext(); }) })
更多參數請去官網自行查詢，http://2.swiper.com.cn/api/index.html
2.移動端，swiper3，滑動效果
先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery類庫）；
(1)html文件內容：
<div class="figure_wrap"> <!-- 放在外部的分頁器容器 --> <div class="nav"> <!-- 圖片對應的分頁器 --> <div class="swiper-pagination"></div> </div> <!-- 圖片和對應的文本的外層容器 --> <div class="figure"> <!-- 文本容器 --> <div class="text"> <section class="active"> <h3>公眾號收銀台</h3> <p>潤聯網絡在微信中建立了公眾號收銀台，同時支持支付寶和微信收款，收銀台不僅擁有完善的店員等級管理系統，同時還能用於POS收銀機商戶。</p> <div class="wrap"><a href="subscription.html">了解更多 ></a></div> </section> <section> <h3>POS收銀機</h3> <p>潤聯POS終端收銀機，不僅支持普通的刷卡業務，同時能使用訂單支付，並且綁定手機公眾號后，能使用公眾號的功能，也能綁定多個收銀員收款。</p> <div class="wrap"><a href="pos.html">了解更多 ></a></div> </section> <section> <h3>收銀寶軟件</h3> <p>潤聯收銀寶是在WINDOWS系統上開發的，用於收銀機上的收款軟件，具有打印公眾號收銀小票和利用掃碼槍反掃收款等功能。</p> <div class="wrap"><a href="cashbaby.html">了解更多 ></a></div> </section> </div> <!-- 圖片容器，也叫圖片的可視區 --> <div class="swiper-container"> <!-- 包裹圖片的父級元素 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/slide1.png" alt=""></div> <div class="swiper-slide"><img src="img/silde2.png" alt=""></div> <div class="swiper-slide"><img src="img/silde3.png" alt=""></div> </div> </div> </div> </div>
(2)less文件內容：
.figure_wrap{ .nav{ /* 因為分頁器自帶絕對定位屬性，所以需要給它的父級元素添加相對或者絕對定位屬性，並且給予一個固定的高度 */ position: relative; height: 2.65rem; padding: 0.7rem 0.4rem 0.4rem; box-sizing: border-box; .swiper-pagination{ /* 因為分頁器自帶絕對定位屬性，如果需要依據父級元素來確定寬度，就要設置寬度百分比或者css3的計算函數 */ width: calc(~'100% - 0.8rem'); /* 添加彈性盒，子元素就會自動歸為一行並且不會產生多余的空隙 */ display: block; .swiper-pagination-bullet{ /* 因為每一個分頁按鈕自帶了固定的寬高，所以需要按照自己的需求進行手動修改 */ width: auto; height: 1.55rem; /* 橫向均分父元素的寬度 */ flex: 1; /* 因為每一個分頁按鈕自帶了圓角、透明度、背景顏色以及手勢樣式，所以需要按照自己的需求進行手動修改 */ border-radius: 0; opacity: 1; cursor: auto; /* 添加其他公共樣式 */ font-size: 0.28rem; color: #999; display: flex; justify-content: center; align-items: flex-end;/* 對每一個分頁按鈕添加私有樣式 */ &.bullet1{ .bgImg('/product_page1.png',center); .bgSize(0.52rem); } &.bullet2{ .bgImg('/product_page2.png',center); .bgSize(1.05rem); } &.bullet3{ .bgImg('/product_page3.png',center); .bgSize(1rem); } /* 修改和添加被選中的分頁按鈕的樣式 */ &.swiper-pagination-bullet-active{ color: @color_blue; &.bullet1{ .bgImg('/product_page1_active.png',center); .bgSize(0.52rem); } &.bullet2{ .bgImg('/product_page2_active.png',center); .bgSize(1.05rem); } &.bullet3{ .bgImg('/product_page3_active.png',center); .bgSize(1rem); } } } } } .figure{ padding: 0.55rem 0.4rem 0.85rem; /* 設置圖片對應的文本內容的樣式 */ .text{ height: 3.5rem; position: relative; section{ position: absolute; left: 0; top: 0; display: none; &.active{ display: block; } h3{ font-size: 0.36rem; } p{ font-size: 0.28rem; line-height: 0.5rem; margin: 0.35rem 0 0.4rem; } .wrap{ a{ display: block; font-size: 0.28rem; color: @color_blue; } } } } /* 修改和添加圖片區域的樣式 */ .swiper-container{ /* 給定可視區容器的寬高 */ width: 5.5rem; height: 4rem; margin: 0 auto; .swiper-wrapper{ .swiper-slide{ /* 因為.swiper-wrapper和.swiper-slide的寬度都是默認100%，所以都是和可視區的寬高相匹配，只需要設置里面的圖片樣式 */ display: flex;
justify-content: center; align-items: center; img{ &:nth-child(1){ width: 4.42rem; } &:nth-child(2){ width: 5.42rem; } &:nth-child(3){ width: 5.23rem; } } } } } } }
(3)js文件內容：
$(function(){ // 實例化swiper var mySwiper = new Swiper('.swiper-container',{ effect: 'slide', // 設置slide的切換效果，默認為slide autoplay: 0, // 設置自動切換的時間間隔，默認為0，不設定該參數或者設為0，slide不會自動切換 speed: 1000, // 設置切換效果所需要花費的時間，默認為300 loop: true, // 是否無縫循環，默認為false loopAdditionalSlides: 0, // loop模式下會在slides前后復制若干個slide，默認為0，即前后各復制1個 pagination: '.swiper-pagination', // 設置分頁器容器的css選擇器或HTML標簽 paginationType: 'bullets', // 設置分頁器樣式類型，默認為'bullets'即圓點 paginationClickable: true, // 是否可以點擊分頁器來控制切換，默認為false autoplayDisableOnInteraction: false, // 用戶操作swiper之后，是否禁止autoplay，默認為true paginationHide: false, // 點擊swiper是否會隱藏分頁器，默認為false paginationElement: 'li', // 設定分頁器指示器的HTML標簽，默認為'span'，如果是自定義渲染，此項設置無效 paginationBulletRender: function (swiper,index, className) { // 自定義當樣式為'bullets'時分頁器的內容，接受當前頁的索引值和類名作為參數 // console.log(arguments); var className2; var text; switch(index){ case 0: className2 = 'bullet1'; text = '這是第一個分頁按鈕'; break; case 1: className2 = 'bullet2'; text = '這是第二個分頁按鈕 '; break; case 2: className2 = 'bullet3'; text = '這是第三個分頁按鈕 '; break; } return '<div class="' + className + ' ' + className2 + '">' + text +'</div>'; // 實際顯示多個具有某個相同類名的通用標簽，不同的是各自另外帶上的類名和標簽的文本內容 }, // paginationCustomRender: function (swiper,current, total) { // 自定義當樣式為'custom'時分頁器的內容，接受當前頁數和總數作為參數 // return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 實際顯示一個通用的標簽，改變的只是該標簽的文本內容 // }, uniqueNavElements: false, // 默認為true，表示僅本swiper的container內的分頁器有效，設置為false后，container以外的分頁器也生效了 prevButton: '.swiper-button-prev', // 設置前進按鈕的css選擇器或HTML元素 nextButton: '.swiper-button-next', // 設置后退按鈕的css選擇器或HTML元素 preventClicks: true ,// 是否在swiper發生觸摸時阻止默認事件（preventDefault），默認為true onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換后的slide索引值 // 同步改變每個分頁器對應的在輪播圖之外的內容 var idx = swiper.activeIndex - 1; var textArr = $('.text section',$('.figure')); $(textArr[idx]).addClass('active').siblings().removeClass('active'); } }); })
更多參數請去官網自行查詢，http://www.swiper.com.cn/
3.移動端，swiper3，漸隱漸現效果
先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery類庫）；
(1)html文件內容：
<!-- 如果需要在圖片可視區的周圍添加一些樣式，需要在外層套上一層<div> --> <div class="swiper-container-wrapper"> <!-- 圖片可視區 --> <div class="swiper-container"> <!-- 包裹圖片的父級元素 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/slide1.png" alt=""></div> <div class="swiper-slide"><img src="img/slide2.png" alt=""></div> <div class="swiper-slide"><img src="img/slide3.png" alt=""></div> </div> </div> <!-- 前進和后退按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- 放在外部的分頁器容器 --> <div class="nav"> <!-- 圖片對應的分頁器 --> <div class="swiper-pagination"></div> </div> <!-- 文本容器 --> <ul class="text"> <li class="active">這是第一個分頁對應的文本</li> <li>這是第二個分頁對應的文本</li> <li>這是第三個分頁對應的文本</li> </ul>
(2)less文件內容：
.swiper-container-wrapper{ /* 設置圖片可視區的外層<div>的樣式 */ height: 4.2rem; .bgImg('/swiper_container.png'); .bgSize; /* 因為子元素設置了margin-top，為了防止父元素下沉，所以要加上overflow:hidden; */ overflow: hidden; /* 設置圖片可視區內的樣式 */ .swiper-container{ /* 設置圖片可視區的寬高，因為自帶了margin: 0 auto; 所以會在外層<div>里水平居中*/ width: 4.5rem; height: 3.45rem; margin-top: 0.15rem; .swiper-wrapper{ .swiper-slide{ /* 不用管.swiper-wrapper和.swiper-slide，只需要設置里面的圖片樣式 */ img{ width: 4.7rem; height: 3.54rem; } } } } /* 隱藏前進和后退按鈕 */ .swiper-button-prev,.swiper-button-next{ display: none; } } .nav{ /* 因為分頁器自帶絕對定位屬性，所以需要給它的父級元素添加相對或者絕對定位屬性，並且給予一個固定的高度 */ position: relative; height: 1rem; line-height: 1rem; .swiper-pagination{ /* 因為分頁器自帶絕對定位屬性，如果需要依據父級元素來確定寬度，就要設置寬度百分比或者css3的計算函數 */ width: 100%; /* 添加彈性盒，子元素就會自動歸為一行並且不會產生多余的空隙 */ display: flex; .swiper-pagination-bullet{ /* 因為每一個分頁按鈕自帶了固定的寬高，所以需要按照自己的需求進行手動修改 */ width: auto; height: auto; /* 橫向均分父元素的寬度 */ flex: 1; /* 因為每一個分頁按鈕自帶了圓角、透明度、背景顏色以及手勢樣式，所以需要按照自己的需求進行手動修改 */ border-radius: 0; opacity: 1; cursor: auto; background-color: transparent; /* 添加其他公共樣式 */ font-size: 0.2rem; color: #999; /* 修改和添加被選中的分頁按鈕的樣式 */ &.swiper-pagination-bullet-active{ color: #000; } } } } /* 設置圖片對應的文本內容的樣式 */ .text{ position: relative; height: 1rem; line-height: 1rem; li{ width: 100%; font-size: 0.28rem;
opacity: 0;
position: absolute; left: 0; top: 0; transition: opacity 0.5s; &.active{ opacity: 1;
transition: opacity 0.5s; } } }
(3)js文件內容：
$(function(){ var mySwiper = new Swiper('.swiper-container',{ effect: 'fade', // 設置slide的切換效果，默認為slide fade: false, // 設置fade的效果參數，默認為false，表示關閉淡出，即過渡中的slide透明度從0->1（淡入），其他slide透明度變為0 autoplay: 2000, // 設置自動切換的時間間隔，默認為0，不設定該參數或者設為0，slide不會自動切換 speed: 1000, // 設置切換效果所需要花費的時間，默認為300 loop: true, // 是否無縫循環，默認為false loopAdditionalSlides: 0, // loop模式下會在slides前后復制若干個slide，默認為0，即前后各復制1個 pagination: '.swiper-pagination', // 設置分頁器容器的css選擇器或HTML標簽 paginationType: 'bullets', // 設置分頁器樣式類型，默認為'bullets'即圓點 paginationClickable: true, // 是否可以點擊分頁器 來控制切換，默認為false autoplayDisableOnInteraction: false, // 用戶操作swiper之后，是否禁止autoplay，默認為true paginationHide: false, // 點擊swiper是否會隱藏分頁器 ，默認為false paginationElement: 'li', // 設定分頁器指示器的HTML標簽，默認為'span'，如果是自定義渲染，此項設置無效 paginationBulletRender: function (swiper,index, className) { // 自定義當樣式為'bullets'時分頁器的內容，接受當前頁的索引值和類名作為參數 // console.log(arguments); var text; switch(index){ case 0: text = '這是第一個分頁按鈕'; break; case 1: text = '這是第二個分頁按鈕 '; break; case 2: text = '這是第三個分頁按鈕 '; break; } return '<div class="' + className + '">' + text +'</div>'; // 實際顯示多個類名相同的通用標簽，不同的是各自的文本內容 }, // paginationCustomRender: function (swiper,current, total) { // 自定義當樣式為'custom'時分頁器的內容，接受當前頁數和總數作為參數 // return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 實際顯示一個通用的標簽，改變的只是該標簽的文本內容 // }, uniqueNavElements: true, // 默認為true，表示僅本swiper的container內的分頁器有效，設置為false后，container以外的分頁器也生效了 prevButton: '.swiper-button-prev', // 設置前進按鈕的css選擇器或HTML元素 nextButton: '.swiper-button-next', // 設置后退按鈕的css選擇器或HTML元素 preventClicks: true ,// 是否在swiper發生觸摸時阻止默認事件（preventDefault），默認為true onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換后的slide索引值 // 同步改變每個分頁器對應的在輪播圖之外的內容 var idx = swiper.activeIndex - 1; var textArr = $('.text li',$('.figure_wrap')); $(textArr[idx]).addClass('active').siblings().removeClass('active'); } }) })
更多參數請去官網自行查詢，http://www.swiper.com.cn/