移動端輪播圖

1. 頁面布局

1.1 頁面框架

<body><div class="box"><div class="tupian"><img src="4.webp" alt=""><img src="1.webp" alt=""><img src="2.webp" alt=""><img src="3.webp" alt=""><img src="4.webp" alt=""><img src="1.webp" alt=""></div><ul><li data-aa="0" class="aaa"></li><li data-aa="1"></li><li data-aa="2"></li><li data-aa="3"></li></ul></div>
</body>

1.2css樣式

    <style>*{margin: 0;padding: 0;}.box {position: relative;/* 在移動端如果不設置下面樣式 可以拖動 */overflow: hidden;}.tupian img {float: left;width: 16.66%;}.tupian {width: 600%;margin-left:-393px;}ul {position: absolute;top: 300px;right: 20px;}ul li {float: left;margin-left: 30px;background-color: #fff;display: block;width: 20px;height: 10px;}.aaa {background-color: coral;}</style>

2. 實現自動輪播

2.1 獲取用到元素

    var box = document.querySelector('.box')var tupian = document.querySelector('.tupian')var ul = document.querySelector('ul')

2.2 通過css3的 transition 和 transform 屬性實現動畫效果

  • 創建全局變量num作為輪播圖的計數器
  • 創建全局變量imgWidth 此變量就是整個box的寬度
  • 創建一個定時器 時隔3秒觸發一次 num++ 同時執行下面代碼：
    var translate = -num * imgWidth 整體tupian向左每次移動一張圖片寬度
  • 通過transition實現過渡效果
var timer = setInterval(function () {num++var translate = -num * imgWidth//設置元素的移動在2s內完成 給元素添加過度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)

以上代碼計時器開啟后會不斷切換寬度 當num>4后沒有圖片顯示 當num<0后前方也沒有圖片

2.3 解決上面問題 實現重復輪播圖片

  • 通過給 tupian 添加 transitionend 事件 （當transition過渡效果完成后觸發此事件）
  • 在此事件中通過判斷num==4時 將tupian.style.transform的值設為0 也就是回到第一張位置
  • 同時將取消過度效果
  • 此事件中添加判斷
    當num==4時也就是最后一張圖片
    當num<0時也就是第一張圖片（后補那張和最后一張相同）
//過度執行結束后 會觸發 transitionend 事件tupian.addEventListener('transitionend', function () {// console.log(num)if (num == 4) {num = 0//取消過度tupian.style.transition = 'none'tupian.style.transform = 'TranslateX(0px)'}else if(num<0){num=3var translatex=-num*imgWidthtupian.style.transition = 'none'tupian.style.transform = 'TranslateX('+translatex+'px)'}

3. 手指拖動實現輪播

1. 手指觸摸到元素上 停止輪播圖自動播放
2. 判斷手指的移動方向 然后圖片向這個方向移動
3. 判斷手指的移動距離 如果超出范圍就切換輪播圖 如果沒有超出這個范圍 則繼續顯示原來的輪播圖

3.1 設置全局變量

//獲取手指的初始坐標
var startx = 0
//獲取圖片的初始坐標
var tupianx = 0
//手指的移動距離
var movex = 0

3.2 為 tupian 添加手指按下事件

事件中：

  • 停止輪播圖
  • 獲取手指按下時的坐標 賦值給變量 startx
  • 獲取按下手指時的tupian坐標
tupian.addEventListener('touchstart', function (e) {//手指按下時將現在坐標賦值給 startxstartx = e.targetTouches[0].pageXtupianx = tupian.offsetLeft//清除定時器clearInterval(timer)timer = null})

3.3 為 tupian 添加手指在DOM上的移動事件

事件中：

  • 通過e.targetTouchrs[0].pageX不斷獲取手指的坐標
  • 通過公式movex=e.targetTouchrs[0].pageX - startx 拿到手指的移動距離
  • 將上面的這個距離賦值給 tupian 讓其隨之移動
  • 判斷flag是后面的節流閥代碼 當過渡效果未完成不允許拖動
//為tupian添加 touchmove（手指拖動） 事件 拖動 tupiantupian.addEventListener('touchmove', function (e) {//禁止默認行為e.preventDefault()if (flag) {movex = e.targetTouches[0].pageX - startxvar translatex = -num * imgWidth + movex//取消過度tupian.style.transition = 'none'this.style.transform = 'Translatex(' + translatex + 'px)'}})

3.4 為 tupian 添加手指離開DOM事件

事件中：

  • 判斷手指的移動有沒有超過50
    超過50切換輪播圖
    未超50回彈輪播圖
  • 同時判斷手指滑動方向 決定切換上一張還是下一張輪播圖
  • 并且重啟輪播圖
tupian.addEventListener('touchend', function () {/*根據手指的移動距離 判斷是否需要切換輪播圖如果移動距離 >=50 切換輪播圖如果移動距離  <50 回彈輪播圖*///設置節流閥if (flag) {//將節流閥設置為falseflag = falseif (Math.abs(movex) >= 50) {if (movex > 0) {num--} else {num++}var translatex = -num * imgWidth//添加過度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'} else {var translatex = -num * imgWidth//添加過度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'}//清除定時器clearInterval(timer)//重啟輪播timer = setInterval(function () {num++var translate = -num * imgWidth//設置元素的移動在2s內完成 給元素添加過度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)}})

4. 設置指示器的樣式

效果：當輪播圖轉換到相應的圖片是 下面相應的指示器與其他顏色不同

  • 設置全局變量sort用來為指示器計數
  • 把sort變量放置到transitionend事件中 也就是過度效果完成后sort=圖片的下標值
  • 設置指示器效果函數如下兩種：

第一種：將每次調用此函數 將所有的li標簽的類名清空
同時為顯示圖片對應的指示器添加類名 函數調用在transitionend事件中

//設置指示器的樣式function yuan() {for (var i = 0; i < ul.children.length; i++) {ul.children[i].className = ''}//設置對應指示器的樣式ul.children[sort].className = 'aaa'}

第二種：通過classlist屬性 找出具有aaa類名的li將其類名清空 同時為顯示圖片對應的指示器添加類名
函數調用在transitionend事件中

//設置指示器的樣式function yuan() {ul.querySelector('.aaa').classList.remove('aaa')//設置對應指示器的樣式ul.children[sort].className = 'aaa'}

完整代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box {position: relative;/* 在移動端如果不設置下面樣式 可以拖動 */overflow: hidden;}.tupian img {float: left;width: 16.66%;}.tupian {width: 600%;margin-left:-414px;}ul {position: absolute;top: 300px;right: 20px;}ul li {float: left;margin-left: 30px;background-color: #fff;display: block;width: 20px;height: 10px;}.aaa {background-color: coral;}</style>
</head><body><div class="box"><div class="tupian"><img src="4.webp" alt=""><img src="1.webp" alt=""><img src="2.webp" alt=""><img src="3.webp" alt=""><img src="4.webp" alt=""><img src="1.webp" alt=""></div><ul><li data-aa="0" class="aaa"></li><li data-aa="1"></li><li data-aa="2"></li><li data-aa="3"></li></ul></div>
</body>
<script>var box = document.querySelector('.box')var tupian = document.querySelector('.tupian')var ul = document.querySelector('ul')//獲取移動的寬度var imgWidth = box.offsetWidth//創建變量 用于輪播圖的計數器var num = 0//創建一個用于指示器的計數器var sort = 0//設置節流閥flag = true//創建指示器的計數器var sort=0//自動輪播效果的實現var timer = setInterval(function () {num++var translate = -num * imgWidth//設置元素的移動在2s內完成 給元素添加過度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)//過度執行結束后 會觸發 transitionend 事件tupian.addEventListener('transitionend', function () {// console.log(num)if (num == 4) {num = 0//取消過度tupian.style.transition = 'none'tupian.style.transform = 'TranslateX(0px)'}else if(num<0){num=3var translatex=-num*imgWidthtupian.style.transition = 'none'tupian.style.transform = 'TranslateX('+translatex+'px)'}//為節流閥設置為trueflag = true//設置指示器樣式sort=numyuan()})/*實現手指拖動輪播圖（1手指觸摸到元素上 停止輪播圖自動播放（2判斷手指的移動方向 然后圖片向這個方向移動（3判斷手指的移動距離 如果超出范圍就切換輪播圖 如果沒有超出這個范圍 則繼續顯示原來的輪播圖*///獲取手指的初始坐標var startx = 0//獲取圖片的初始坐標var tupianx = 0//手指的移動距離var movex = 0//為tupian添加 touchstart（手指觸摸） 事件 停止輪播tupian.addEventListener('touchstart', function (e) {//手指按下時將現在坐標賦值給 startxstartx = e.targetTouches[0].pageXtupianx = tupian.offsetLeft//清除定時器clearInterval(timer)timer = null})//為tupian添加 touchmove（手指拖動） 事件 拖動 tupiantupian.addEventListener('touchmove', function (e) {//禁止默認行為e.preventDefault()if (flag) {movex = e.targetTouches[0].pageX - startxvar translatex = -num * imgWidth + movex//取消過度tupian.style.transition = 'none'this.style.transform = 'Translatex(' + translatex + 'px)'}})//為tupian添加 touchend（手指離開） 事件 重啟輪播tupian.addEventListener('touchend', function () {/*根據手指的移動距離 判斷是否需要切換輪播圖如果移動距離 >=50 切換輪播圖如果移動距離  <50 回彈輪播圖*///設置節流閥if (flag) {//將節流閥設置為falseflag = falseif (Math.abs(movex) >= 50) {if (movex > 0) {num--} else {num++}var translatex = -num * imgWidth//添加過度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'} else {var translatex = -num * imgWidth//添加過度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'}//清除定時器clearInterval(timer)//重啟輪播timer = setInterval(function () {num++var translate = -num * imgWidth//設置元素的移動在2s內完成 給元素添加過度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)}})//設置指示器的樣式function yuan() {for (var i = 0; i < ul.children.length; i++) {ul.children[i].className = ''}//設置對應指示器的樣式ul.children[sort].className = 'aaa'}
</script></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248792.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248792.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248792.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Boost 序列化

Boost 序列化

原文鏈接&#xff1a; https://blog.csdn.net/qq2399431200/article/details/45621921 1. 編譯器 gcc, boost 1.55 2.1第一個簡單的例子 —— Hello World &#xff0c;將字符串內容歸檔到文本文件中 #include <iostream>#include <fstream>#include <string>…
閱讀更多...
docker CE 的安裝

docker CE 的安裝

一、Docker CE的安裝1.先決條件運行環境&#xff1a;Ubuntu 64位或者其他支持Docker的64位系統運行配置&#xff0c;linux內核版本必須大于 3.10&#xff0c;否則會因為缺少容器運行所需的功能而出錯。 2.在ubuntu下安裝Docker CEUbuntu版本? Cosmic 18.10 ? Bionic 18.04 (…
閱讀更多...
nodeJS中的異步編程

nodeJS中的異步編程

nodejs 不是單線程 在博客項目中關于異步問題&#xff1a; 1.當用戶添加一條博客時 需要通過post方式向服務器發送數據 后臺獲取用戶以post方式拿到傳送過來的數據 然后存入數據庫&#xff1a; 上面的代碼&#xff1a;創建一個空字符串 當用戶向服務器發送請求時出發data事件將…
閱讀更多...
day01筆記

day01筆記

linux基本命令的學習&#xff1a; 1.查看主機名hostname 2.修改主機名hostnamectl set-hostname s16ds 3.linux命令提示符 [roots16ds ~]# # 超級用戶的身份提示符 $ 普通用戶的身份提示符4.修改命令提示符 PS1變量控制 [roots16ds ~]# echo $PS1 [\u\h \W]\$PS1[\u\h \w \t]…
閱讀更多...
angular 路由

angular 路由

1. vscode編輯器快速新建主路由&#xff1a; ng-router注意修改為 根路由為&#xff1a;‘forRoot()’app-route.module.ts;{ path:,redirectTo:/login,pathMatch:full } 當路由為空的時候&#xff0c;會重定向到/login路由&#xff0c;必須加上pathMatch:full 1 import { Rou…
閱讀更多...
nodeJs 操作數據庫

nodeJs 操作數據庫

首先在node中下載mysql包 npm install mysql 連接數據庫 var mysql require(mysql); var con mysql.createConnection({host : localhost,user : root,password : root,database : blog });開啟鏈接 con.connect();執行增刪改查 不同功能創建不同的sql語句即可…
閱讀更多...
shell字體顏色應用

shell字體顏色應用

輸出特效格式控制&#xff1a; \033[0m 關閉所有屬性 \033[1m 設置高亮度 \03[4m 下劃線 \033[5m 閃爍 \033[7m 反顯 \033[8m 消隱 \033[30m -- \033[37m 設置前景色 \033[40m -- \033[47m 設置背景色 光標位置等的格式控制&#xff1a; …
閱讀更多...
Spring Boot 統一結果封裝

Spring Boot 統一結果封裝

ResultVo, 返回結果對象 Data public class ResultVo<T> {private Integer code;private String message;private T data; }ResultVoUtil, 封裝返回結果 public class ResultVoUtil {public static<T> ResultVo<T> sucess(T data) {ResultVo<T> result…
閱讀更多...
總結面試題——Javascript

總結面試題——Javascript

文章目錄1.閉包2.作用域鏈3.JavaScript的原型 原型鏈 有什么特點4.事件代理5.Javascript如何實現繼承6.this對象7.事件模型8.new操作符9.ajax原理10.解決跨域問題11.模塊化開發怎么做12.異步加載js的方式有哪些13.會造成內存泄漏的操作14.XML和JSON的區別15.webpack16.AMD和Com…
閱讀更多...
js實現替換指定字符后面的內容（包括指定字符）

js實現替換指定字符后面的內容（包括指定字符）

href 223d啥啥啥d dds word sss 1233;var indexOf href.indexOf(word);len href.substring(indexOf,href.length);&#xff08;包括指定字符串&#xff09; var newHref href.replace(len,替換內容);轉載于:https://www.cnblogs.com/-lin/p/10172503.html
閱讀更多...
OAuth2.0 知多少

OAuth2.0 知多少

OAuth2.0 知多少 原文:OAuth2.0 知多少1. 引言 周末逛簡書&#xff0c;看了一篇寫的極好的文章&#xff0c;點擊大紅心點贊&#xff0c;就直接給我跳轉到登錄界面了&#xff0c;原來點贊是需要登錄的。 可是沒有我并沒有簡書賬號&#xff0c;一直使用的QQ的集成登錄。下面有一排…
閱讀更多...
五分鐘帶你摸透 Vue組件及組件通訊

五分鐘帶你摸透 Vue組件及組件通訊

一.組件化開發 組件 (Component) 是 Vue.js 強大的功能之一。組件可以擴展 HTML 元素&#xff0c;封裝可重用的代 碼。在較高層面上&#xff0c;組件是自定義元素&#xff0c;Vue.js 的編譯器為它添加特殊功能。在vue中都是組件化開發的&#xff0c;組件化開發就是把一個完整的…
閱讀更多...
Parameter 'userName' not found. Available parameters are [1, 0, param1, param2]

Parameter 'userName' not found. Available parameters are [1, 0, param1, param2]

Mapper接口的方法的參數沒有加&#xff1a;Param("xxx")注解&#xff0c;或者是xxx寫不對轉載于:https://www.cnblogs.com/linliquan/p/10987136.html
閱讀更多...
微信公眾號開發-接入

微信公眾號開發-接入

一 首先實現內網穿透&#xff0c;公眾號需要連接我們的服務器&#xff0c;內外無法訪問&#xff0c;所以先實現自己的內網可以測試時連接外網&#xff0c;下載natapp&#xff0c;選擇windows&#xff0c;順便下載config,ini 配置文件。注冊好購買免費的隧道 然后將token寫入配置…
閱讀更多...
Vue 項目上線優化

Vue 項目上線優化

上線項目的優化 優化上線項目&#xff0c;首先在上線打包時我們通過babel插件將console清除&#xff0c;當然對項目打包后的體積的影響是微乎其微&#xff0c;對項目的入口文件的改善也是很有必要的&#xff0c;因為在開發階段和上線如果我們使用的是同一入口文件&#xff0c;…
閱讀更多...
Python并發編程—進程

Python并發編程—進程

多任務編程 1.意義&#xff1a; 充分利用計算機多核資源&#xff0c;提高程序的運行效率。 2.實現方案 &#xff1a;多進程 &#xff0c; 多線程 3.并行與并發 并發 &#xff1a; 同時處理多個任務&#xff0c;內核在任務間不斷的切換達到好像多個任務被同時執行的效果&#xf…
閱讀更多...
Vue 腳手架中的.eslintrc.js代碼規范 的解決

Vue 腳手架中的.eslintrc.js代碼規范 的解決

在我們使用Vue腳手架 創建項目時 尤其是團隊共同開發項目時 會按照一個共同的代碼規范來編程 創建Vue腳手架中有一個.eslintrc.js格式 但是在編程中我們通常會使用 shiftaltf 進行代碼格式化 但是由于格式化后的代碼 與Vue中的.eslintrc規范不協調 尤其是 “” &#xff1b; 以…
閱讀更多...
innodb_locks_unsafe_for_binlog分析

innodb_locks_unsafe_for_binlog分析

mysql數據庫中默認的隔離級別為repeat-read. innodb默認使用了next-gap算法&#xff0c;這種算法結合了index-row鎖和gap鎖。正因為這樣的鎖算法&#xff0c;innodb在可重復讀這樣的默認隔離級別上&#xff0c;可以避免幻象的產生。 innodb_locks_unsafe_for_binlog最主要的作用…
閱讀更多...
emacs的使用方法

emacs的使用方法

emacs的使用方法 emacs配置&#xff1a; 將文件命名為.emacs&#xff0c;把配置敲進去&#xff0c;放在home文件夾 emacs命令行&#xff1a; altx打開命令行 編譯&#xff1a; 在命令行輸入compile&#xff0c;回車&#xff0c;會出現make -k&#xff0c;刪掉它&#xff0c;輸入…
閱讀更多...
前端面試---Vue部分考點梳理

前端面試---Vue部分考點梳理

一. Vue的使用 1. Vue的基本使用 指令 插值 插值 表達式 指令 動態屬性 v-html 會有XSS風險 會覆蓋子組件 computed 和 watch computed 有緩存 data不變則不會重新計算watch 如何深度監聽watch 監聽引用類型時 拿不到oldVal v-for v-for 和 v-if 不能同時使用:key的值盡量…
閱讀更多...
最新文章

Copyright @ 2022~2023