首先 我們想實現的效果是在手指按下拖動的時候能夠跟隨移動（無動畫效果）然後鬆開手指後判斷移動的位置 和某乙個值進行比較
當移動位置小於1/3的時候 抬起手指的回到原位( 此時也有動畫效果) 具體**如下
布局就是簡單的長列形式 讓最外層的banner固定寬多餘的隱藏 ul的寬度這足夠大 通過移動ul的left值實現的移動 基本上就是pc 端的左右輪播
html 部分
1<
div
class
="banner"
>
2<
ul>
3<
li><
img
srcalt
="">
li>
4<
li><
img
srcalt
="">
li>
5<
li><
img
srcalt
="">
li>
6<
li><
img
srcalt
="">
li>
7<
li><
img
srcalt
="">
li>
8<
li><
img
srcalt
="">
li>9ul
>
10div
>
css 部分
1main .banner 89
main .banner ul
1617
main .banner ul li
2122
main .banner ul li img
js 部分
1/**2* @function[此函式作用封裝手機端輪播]
3* 此題需主要幾個點 首先加transition ： all 1s linear;是放在css中 後來發現在拖著動的時候也有動畫 為了不讓拖著動的
4* 時候有動畫 於是採用translate 與left相結合的方法實現 但是很快又發現兩個位置會出現疊加問題 然後哦嘛噶出現各種歸零及
5* 恢復當前位置的死循壞中了 最後還是放棄了 然後用left 在用到的用style加上動畫效果 不需要的地方再把動畫取消了 這樣
6* 就能達到我們需要的效果了7*
8* 做此題的思路是先做出無動畫狀態下的左後右滑能夠相應的進行切換 接著新增上動畫效果 然後在move事件中新增上
9* 跟隨的情況 接著判斷第一張的右滑 和最後一張不能左滑的情況 這裡建議多使用變數開關和if語句
10* 不要使用乙個if語句或者三木運算加上|| && ！他們就行判斷 不然容易暈
11*
12*/
13class myswiper
19init()
22touchevent()
36//
this.end =
40break;41
case "touchmove":
42this.end =
46//
在手指滑動的滑動距離賦值給這個滑動的距離 換句話說也是這個ul移動的距離
47 let flag1=false
;48 let flag2=false;49
if(that.index==0)54}
55//
同理 在下標為最後乙個的時候切往左滑的是不能讓移動的
56//
console.log((that.el.children),"----我在下標為最後一張")
57if(that.index==(ul.children.length - 1))61}
62 let flag3=true;//
第三個開關控制是不是能移動
63//
console.log(flag2)
64if
(flag1)
67if
(flag2)
70if
(flag3)px`;73}
74break;75
case "touchend":
76if (this
.end) px`;
82 that.move(this.end.x - this
.start.x);83}
84}85}
86}87}
88move(l)
98 console.log(this.index, "-------左滑");
99 ul.style.transition =`all 1s linear`;
100 ul.style.left = -this.index * w + "px"
101//
ul.style.transform = `translatex($px)`;
102}
103104
if (l > w / 3)
110 console.log(this.index, "-------右滑")
111 ul.style.left = -this.index * w + "px";
112 ul.style.transition =`all 1s linear`;
113//
ul.style.transform = `translatex($px)`;
114}
115116
}117 }
移動端滑動輪播，原生JS
因為公司需要自定義兩個輪播圖聯動，又不想引入第三方庫，所以自己研究了下。下面只是乙個簡單的輪播圖，由此再拓展一下即可實現兩個輪播圖聯動。doctype html html lang en head meta charset utf 8 meta name viewport content width...
移動端輪播效果
一 涉及知識點 1.touchstart touchmove touchend 2.觸控引數，事件e e.touches 螢幕中所有手勢列表 e.touches 0 獲取第乙個手勢,是乙個json物件 屬性有pagex,pagey.用於touchstart，touchmove事件中 e.change...
原生js實現輪播
分三步 將視口元素設定overflow hidden 將其子元素設定float left 讓橙色的框 包裹 滑動起來 寫出滑動函式，通過索引值的差來判斷左滑還是右滑，索引值的差 寬度等於滑動距離 當前頁面失去焦點之後，瀏覽器會快取動畫，但是setinterval會繼續執行，導致過一會切回頁面的時候動...