最近專案中有這樣乙個需求，研究了兩種寫法乙個原生，乙個使用框架
原生寫法：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
link
rel="stylesheet"
href
="css/huapin.css"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0"
>
head
>
<
body
>
<
div
class
="page2"
>
<
div
class
="silder_bg"
>
<
span
>滑動滑動
span
>
<
img
src="images/1closelight.png"
class
="p2_bg1"
/> //充當乙個提示過度的效果
<
img
src="images/2closebar.png"
id='silder'
class
="p2_bg2"
/>
div>
div>
<
div
class
="page3"
>
div>
body
>
<
script
src="js/zepto.js"
>
script
>
<
script
>
document.getelementbyid(
'silder
').addeventlistener(
'touchmove',
function
(event),
2000
); }
el.style.webkittransform ='
translatex('+
curx +'
px)'
;//使其在x軸位移
},false
); document.getelementbyid(
'silder
').addeventlistener(
'touchend',
function
(event) ,
false
);
this
.style.webkittransform ='
translatex(0px)';
}, false
);
script
>
html
>
huapin.css:
*html,body.page2.page2>.bg2.silder_bg.p2_bg1/*滑動css3動畫
*/@keyframes lightto}
@-webkit-keyframes lightto}
.p2_bg2.silder_bg span
以上是原生的寫法，還可以使用jq的拖拽（draggable）這個方法
下面說下使用swiper的寫法
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>swiper playground
title
>
<
link
rel="stylesheet"
href
="css/swiper.min.css"
>
<
link
rel="stylesheet"
href
="css/huapin.css"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0"
>
<
style
>
html,
body
body
.swiper-container
img
.swiper-slide
.p2_bg
style
>
head
>
<
body
>
//html布局同上面，只是加了個swiper-container容器
<
div
class
="silder_bg"
>
<
span
>滑動滑動
span
>
<
img
src="images/1closelight.png"
class
="p2_bg1"
/>
<
div
class
="swiper-container"
>
<
div
class
>
<
div
class
="swiper-slide"
> //去掉swiper.min.css對swiper-slide的預設樣式
<
img
src="images/2closebar.png"
class
="p2_bg"
/>
div>
div>
div>
div>
<
script
src="js/zpto.js"
>
script
>
<
script
src="js/swiper.min.js"
>
script
>
<
script
>
簡單思路：滑動swiper時監聽滑動距離判斷條件即可
varswiper
=new
swiper(
'.swiper-container',
},},
});script
>
body
>
html
>
以上兩種寫法，原生的實現起來互動的更加快速，swiper滑動的相對有彈性一點，所要監聽的距離更短，也可實現效果
swiper 迴圈切換 swiper 迴圈滑動問題
需要在原始碼中加兩行 進行判斷,分別是move移動時的禁止移動與end結束時的禁止跳轉 不能加粗 具體看有注釋的那行 1.查swipe原始碼裡的move函式，其中有乙個判斷 if options.continuous 加上這行 translate circle index 1 delta.x sli...
swiper外掛程式上下滑動巢狀左右滑動實現方式
問題 近日在做專案過程中遇到問題，想要在首頁上下滑動的基礎上實現第二屏左右滑動 解決 檢視swiper中文官方文件發現如何處理 重點區分好垂直滑動和水平滑動container和分頁器pagination，避免兩者衝突 預備工作 1 匯入swiper外掛程式 注意 一定要在頭部匯入 2 設定樣式 3 ...
swiper滑動失效問題
最近在寫移動端的專案，頁面有用的是swiper滑動的。但是會發現在滑動時，不靈活，就是滑動時隱藏的資料會顯示，但是不滑動資料又在初始那，隱藏的資料還是看不到。於是各種排除問題，終於在pc端 移動端完美解決了問題 ajax h5拼接字串 var saleitem item.data console.l...