使用Swiper開發(fā)移動端頁面，輕松實現(xiàn)圖片的輪播。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)專業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、成都響應(yīng)式網(wǎng)站建設(shè)公司、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

swiper

1.主要包含模塊：

swiper：指滑動、切換（整個滑動對象，有時特指滑塊釋放后仍然正向移動直到貼合邊緣的過程（過渡））
container：指容器（swiper的容器里面包括滑動快（slide）的集合（wrapper）、分頁器（pagination）、前進按鈕等）
wrapper：指包含（觸控的對象，可觸摸區(qū)域，移動的塊的集合，過渡時會隨slide切換產(chǎn)生位移）
slider：指滑塊（切換的塊中的一個，可以包含文字、圖片、html元素或另外一個swiper
pagination：指分頁器（指示slide的數(shù)量和當(dāng)前活動的slide）
active：指活動的，激活的（可視的（visible）slide是活動的，當(dāng)可視slide不止一個時，默認最左邊那個活動的）
callback：指回調(diào)函數(shù)（在某些情況下觸發(fā)）

2.簡單的輪播，如下所示：

 
 
 
  
  
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、 
 
 
 
 
 
 
 
 
 

3.js中其他參數(shù)：

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*輪播的效果：（1）fade:淡入淡出；（2）cube:立方體；（3）coverflow:立體照片*/ 
 slidesPerView:3,/*網(wǎng)格分布：1為在容器區(qū)域出現(xiàn)一張圖；2：在容器區(qū)域出現(xiàn)兩張圖；3：在容器區(qū)域出現(xiàn)三張圖*/ 
 centeredSlides:true,/*默認第一塊居左，設(shè)置為true后則是居中顯示*/ 
 coverflow:{ 
  rotate:30,/*3d旋轉(zhuǎn)角度設(shè)置為30度*/ 
  stretch:10,/*每個slide之間的拉伸值，值越大靠得越近*/ 
  depth:60,/*位置深度，值越大離Z軸越遠，看起來越小*/ 
  modifier:2, 
  slideshadows:true/*開啟陰影*/ 
 } 
 }) 

注意：在使用swiper前，要引入swiper.css和swiper.js以及jQuery
具體可參考網(wǎng)址：點擊打開鏈接

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。