摘要:圖片描述移動端的輪播圖可以有很多方式實現,最常見的可以使用定位手指事件。四手指移入移出開關定時器
圖片描述
移動端的輪播圖可以有很多方式實現,最常見的可以使用定位 + 手指事件。但是我這里介紹的是 CSS3 中的 2d 變換和手指事件,因為變換屬性的代碼更加簡潔優雅
一. 移動端的準備工作* { padding: 0; margin: 0; } img { display: block; } li { list-style: none; } input { outline: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html,body { height: 100%; overflow: hidden; }
CSS 中的初始化
// 阻止瀏覽器的默認行為 document.addEventListener("touchstart", function(event) { event.preventDefault() }); // rem 適配 (function() { var styleNode = document.createElement("style") var width = document.documentElement.clientWidth styleNode.innerHTML = "html {font-size: "+ width/16 +"px;}" document.head.appendChild(styleNode) })(); // 點透 (function() { var aNodes = document.querySelectorAll("a") for (var i = 0; i < aNodes.length; i++) { aNodes[i].addEventListener("touchstart", function() { window.location.href = this.href }) } })();
這里移動端寫頁面之前跟 PC 端有些不同,設計師給我們的像素值可能與移動設備不匹配,首先要進行rem 適配,還有阻止瀏覽器的默認行為,通常情況下,還有處理點透。
二. 基本手指事件var list = document.querySelector(".list") var li = document list.innerHTML += list.innerHTML var startX = 0 var eleX = 0 var translateX = 0 var now = 0 list.addEventListener("touchstart", function(event) { list.style.transition = "none" if (now == 0){ now = 5 } else if (now == 9) { now = 4 } transformCss(list,"translateX",-now*document.documentElement.clientWidth) var touch = event.changedTouches[0] startX = touch.clientX eleX = transformCss(list, "translateX") }) list.addEventListener("touchmove", function(event) { var touch = event.changedTouches[0] var endX = touch.clientX var disX = endX - startX translateX = disX + eleX // 清除過渡 list.style.transition = "none" list.style.transform = transformCss(list,"translateX",translateX) }) list.addEventListener("touchend", function() { var left = transformCss(list, "translateX") now = Math.round(-left / document.documentElement.clientWidth) translateX = -now * document.documentElement.clientWidth list.style.transition = "0.5s" transformCss(list,"translateX",translateX) })
這里設計的無縫輪播很巧妙,把圖片的 li 標簽復制了一份,也就是總共 10 張圖,當滑到 1 圖時,我們在點擊后迅速切到第 6 張,當滑到最后一張圖時,切換到第 5 張。
三. 自動輪播 + 小圓點邏輯var autoSlide = function() { setInterval(function() { if(now == 9) { now = 4 } list.style.transition = "none" transformCss(list, "translateX", -now * document.documentElement.clientWidth) // 設置一個延時,讓過渡生效 setTimeout(function() { now++ list.style.transition = "0.5s" transformCss(list, "translateX", -now * document.documentElement.clientWidth) for(var i = 0; i < spans.length; i++) { spans[i].classList.remove("active") } spans[now % 5].classList.add("active") }, 20) }, 1000) }
這里自動輪播有幾個邏輯
輪播的同時,小圓點跟著動,排他思想,先移走所有小圓點的類名,再多帶帶添加
輪播到 10 張時,快速切換到第 5 張圖,由于所有的滑動都是采用過渡,快速切換采用的清除過渡,所以要設置一個短暫的延時,讓清除過渡不被覆蓋。
四. 手指移入移出開關定時器文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99587.html
摘要:預覽地址圖片的輪播假設需要輪播三張圖片,以前的思路就如圖所示,添加兩個節點。通過索引的切換實現組件的無縫輪播。這樣子父組件就可以通過鉤子和來實時通知子組件,從而控制內容的展示。這個判斷只需讓子組件來做就行了。 預覽地址 圖片的輪播 showImg(https://segmentfault.com/img/remote/1460000018606875?w=1440&h=900); 假設...
摘要:關于輪播圖的實現算是前端的一個基礎,其實實現起來是很簡單,這里把實現的基本思路總結一下。推薦使用,它是一款開源的移動端腳本框架,它可以完美的實現在移端開發的大多數事件,如點擊滑動拖動多點觸控等事件。 關于輪播圖的實現算是前端的一個基礎,其實實現起來是很簡單,這里把實現的基本思路總結一下。輪播圖的實現方案有很多種方式,可以用純js來實現,也可用css來實現,我們這里主要用到了css3的過...
摘要:很久沒上掘金發現草稿箱里存了好幾篇沒發的文章最近梳理下發出來往期面試官系列如何實現深克隆面試官系列的實現面試官系列前端路由的實現面試官系列基于數據劫持的雙向綁定優勢所在面試官系列你為什么使用前端框架前言設計前端組件是最能考驗開發者基本功的測 很久沒上掘金,發現草稿箱里存了好幾篇沒發的文章,最近梳理下發出來 往期 面試官系列(1): 如何實現深克隆 面試官系列(2): Event Bus...
閱讀 2984·2023-04-26 00:23
閱讀 3399·2021-09-13 10:28
閱讀 2178·2021-08-31 14:18
閱讀 2884·2019-08-30 15:54
閱讀 1939·2019-08-30 15:43
閱讀 1276·2019-08-29 16:56
閱讀 2800·2019-08-29 14:16
閱讀 2053·2019-08-28 17:51