【WEB 】從零實現一個交互輪播圖（附源碼）

文章目錄

  • 一、輪播圖整體功能規劃
  • 二、HTML結構深度解析
  • 三、CSS樣式實現細節
    • 1. 定位系統詳解
    • 2. 顯示/隱藏機制
    • 3. 按鈕交互效果實現
    • 4. 純CSS箭頭實現
    • 5. 指示器：當前位置可視化
  • 四、JavaScript邏輯深入解析
    • 1. 核心變量與DOM獲取
    • 2. 圖片切換函數（核心邏輯）
    • 3. 前后切換函數（邊界處理）
    • 4. 自動播放控制
    • 5. 指示器完整交互
    • 6. 事件綁定與初始化

輪播圖作為前端開發中的經典組件，廣泛應用于網站首頁、產品展示等場景。它不僅能在有限空間內展示多張圖片，還能通過動態效果提升用戶體驗。本文將從結構設計、樣式實現到交互邏輯，詳細講解如何從零構建一個功能完善的輪播圖。

輪播圖實現效果：

輪播圖

一、輪播圖整體功能規劃

在開始編碼前，我們需要明確輪播圖的核心功能：

  • 自動播放：圖片按固定時間間隔自動切換
  • 手動切換：通過左右按鈕控制圖片切換
  • 指示器導航：底部小圓點顯示當前位置，點擊可快速跳轉到對應圖片
  • 交互反饋：鼠標懸停時暫停自動播放，顯示操作按鈕；離開時恢復自動播放
  • 平滑過渡：圖片切換時使用動畫效果，避免生硬跳轉

二、HTML結構深度解析

輪播圖的HTML結構看似簡單，實則蘊含了清晰的層次設計：

<div class="box"><!-- 圖片容器組 --><div class="box-img"><img src="img/albumFolklore.jpg"> </div><div class="box-img"><img src="img/albumST.jpg"> </div><div class="box-img"><img src="img/albumSpring.jpg" > </div><div class="box-img"><img src="img/albumNTM.jpg"> </div> <!-- 控制按鈕 --><div class="left"> </div><div class="right"> </div><!-- 指示器 --><div class="dot"><ul id="dot-list"><li class="active" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div>
</div>

結構設計考量：

  • 為什么使用.box-img包裹圖片而非直接操作img標簽？

    • 便于統一控制圖片容器的顯示狀態（opacity）
    • 為后續可能的圖片加載動畫預留空間
    • 可以在不修改圖片本身的情況下添加過渡效果

  • 指示器為什么使用data-index屬性？

    • 建立指示器與圖片的一一對應關系
    • 無需通過復雜計算獲取索引，直接從DOM中讀取
    • 提高代碼可讀性和可維護性

三、CSS樣式實現細節

1. 定位系統詳解

.box{position: relative;
}
.box-img img{position: absolute;top: 0;left: 0;
}

這是輪播圖實現的核心基礎，通過定位系統實現了"多圖疊加"效果：

  • .box設置position: relative后，成為了所有子元素的"定位上下文"
  • 所有圖片設置position: absolute并top: 0; left: 0，使它們都從容器左上角開始定位
  • 最終效果是所有圖片在視覺上重疊在一起，為后續的顯示/隱藏切換奠定基礎

2. 顯示/隱藏機制

.box-img{opacity: 0;transition: opacity 0.5s ease-in-out;
}
.box-img:nth-child(1){opacity: 1;
}

為什么選擇opacity而不是其他方案？

  • 方案對比：

    • display: none：完全移除元素，無法實現過渡動畫
    • visibility: hidden：元素仍占據空間，且過渡效果有限
    • opacity: 0：元素仍存在于頁面中（可響應事件），支持平滑過渡

  • transition屬性詳解：

    • ease-in-out：緩動函數（開始和結束時較慢，中間較快）

3. 按鈕交互效果實現

按鈕設置了三種狀態:

  1. 鼠標移出盒子時隱藏
  2. 鼠標移入盒子但未移入按鈕為淺灰色
  3. 鼠標移入按鈕為深灰色

按鈕演示

.left,.right{position: absolute;top: 225px; /* 垂直居中 */transform: translateY(-50%); /* 精確居中 */width: 35px;height: 35px;display: flex; /* 確保后面::before偽元素選擇器起作用 *//*使箭頭位于圓中心*/align-items: center;justify-content: center;border-radius: 50%; /* 圓形按鈕 */z-index: 10; /* 確保在圖片上方 */cursor: pointer; /* 鼠標懸停顯示手型 */opacity: 0; /*隱藏*/background-color: rgba(0,0,0,0.2);/* 淺灰 */color: white;/*箭頭顏色*/transition: all 0.3s ease; /* 按鈕自身的動畫效果 */
}/* 鼠標懸停盒子時顯示按鈕 */
.box:hover .left, .box:hover .right{opacity:1; /*顯示按鈕*/
}.left{left: 10px;
}
.right{right: 10px;
}

這是一個典型的"條件顯示"交互模式：

  • 默認狀態下按鈕隱藏（opacity：0）
  • 當鼠標懸停在容器上時（.box:hover），通過后代選擇器激活按鈕顯示狀態
  • transform: translateY(-50%)確保按鈕在垂直方向上精確居中

4. 純CSS箭頭實現

.left::before, .right::before{content: '';width: 12px;height: 12px;border-top: 2px solid white;border-left: 2px solid white;
}
.left::before{transform: translateX(2px) rotate(-45deg);
}
.right::before{transform: translateX(-2px) rotate(135deg);
}

這是一種無需圖片的箭頭實現方案：

  • 使用::before偽元素創建一個正方形元素
  • 通過border-top和border-left繪制兩條邊（模擬箭頭的兩條邊）
  • 利用rotate旋轉實現箭頭方向：
    • 左箭頭：旋轉-45度
    • 右箭頭：旋轉135度（相當于-225度）
  • 微調translateX使箭頭視覺上居中

優點： 減少HTTP請求、易于修改顏色和大小、縮放不失真

5. 指示器：當前位置可視化

指示器演示

.dot{position: absolute;bottom: 15px;right: 70px; /* 定位在右下角 */
}.dot ul li{width: 10px;height: 10px;border-radius: 100%; /* 圓形指示器 */background-color: #737171;float: left;margin-right: 15px;cursor: pointer;transition: all 0.3s ease; /* 狀態變化動畫 */
}/* 指示器交互效果 */
.dot ul li.active{background-color: #ffffff;transform: scale(1.4); /* 當前項更大 */box-shadow: 0 0 8px rgba(255,255,255,0.8); /* 高亮效果 */
}

指示器作用：

  • 直觀顯示當前是第幾張圖片及總數量
  • 點擊可快速跳轉到對應圖片
  • 通過active類區分當前選中狀態

四、JavaScript邏輯深入解析

1. 核心變量與DOM獲取

// 獲取 DOM元素
const imgs = document.querySelectorAll('.box-img');
const prevB = document.querySelector(".left");
const nextB = document.querySelector('.right');
const dots = document.getElementById('dot-list').querySelectorAll('li');// 狀態變量
let currentIndex = 0;
const imgCnt = imgs.length;
let autoTimer = null;

變量作用詳解：

  • imgs：獲取所有圖片容器的集合（NodeList），便于批量操作
  • currentIndex：當前顯示圖片的索引，是整個輪播邏輯的"狀態核心"
  • imgCnt：存儲圖片總數，避免重復計算imgs.length
  • autoTimer：存儲計時器ID，用于控制自動播放的開啟與關閉

2. 圖片切換函數（核心邏輯）

function switchToImg(index) {// 隱藏所有圖片imgs.forEach( img => {img.style.opacity = 0;});// 顯示目標圖片imgs[index].style.opacity=1;// 更新當前索引currentIndex = index;// 更新指示器狀態dots.forEach(dot => {dot.classList.remove('active');});dots[index].classList.add('active')
}

這個函數是輪播圖的"心臟"，負責完成一次完整的圖片切換：

執行步驟分解：

  1. 遍歷所有圖片容器，將它們的透明度設為0（隱藏）
  2. 將目標索引對應的圖片容器透明度設為1（顯示）
    • 此時會觸發CSS中定義的transition動畫，實現淡入效果
  3. 更新currentIndex為當前索引，保持狀態同步
  4. 更新指示器狀態：
    • 先移除所有指示器的active類
    • 再給當前索引對應的指示器添加active類
    • 這會觸發指示器的CSS狀態變化（顏色、大小等）

3. 前后切換函數（邊界處理）

// 向左切換
function prevImg(){currentIndex = (currentIndex - 1 + imgCnt) % imgCnt;switchToImg(currentIndex);
}// 向右切換
function nextImg(){currentIndex = (currentIndex + 1) % imgCnt;switchToImg(currentIndex);
}

這兩個函數解決了輪播圖的"循環切換"問題，關鍵在于邊界處理：

  • 向右切換邏輯：

    • 正常情況：索引+1（如從0→1，1→2）
    • 邊界情況：當索引是最后一張（3）時，+1后應該變為0
    • 實現：(currentIndex + 1) % imgCnt，利用取模運算自動回繞

  • 向左切換邏輯：

    • 正常情況：索引-1（如從2→1，1→0）
    • 邊界情況：當索引是0時，-1后應該變為最后一張（3）
    • 實現：(currentIndex - 1 + imgCnt) % imgCnt
    • 加imgCnt是為了避免出現負數（如0-1=-1，+4=3，再取模仍為3）

4. 自動播放控制

// 開始自動播放
function startAutoPlay(){stopAutoPlay();autoTimer = setInterval(nextImg, 3000);
}// 停止自動播放
function stopAutoPlay(){clearInterval(autoTimer);
}

自動播放功能的實現關鍵點：

  • 為什么在startAutoPlay中先調用stopAutoPlay？

    • 防止多次調用startAutoPlay導致創建多個計時器
    • 確保每次開始自動播放前都清除了之前的計時器
    • 避免輪播速度越來越快的問題

  • 時間間隔選擇：3000ms（3秒）是一個平衡用戶瀏覽和交互的常用值

    • 太短：用戶來不及看清內容
    • 太長：輪播效果不明顯

5. 指示器完整交互

function initDots(){dots.forEach((dot,index) => {// 點擊事件dot.addEventListener('click',() => {switchToImg(index);startAutoPlay();});// 鼠標移入事件dot.addEventListener('mouseenter',() => {switchToImg(index);stopAutoPlay();});// 鼠標離開事件dot.addEventListener('mouseleave', startAutoPlay);// 設置數據索引dot.setAttribute('data-index',index);});dots[0].classList.add('active');
}

指示器實現了三種交互方式，提升用戶體驗：

  • 點擊交互：

    • 直接跳轉到對應圖片（調用switchToImg(index)）
    • 跳轉后重新開始自動播放計時（startAutoPlay()）

  • 懸停交互：

    • 鼠標移入時跳轉到對應圖片并暫停自動播放
    • 鼠標離開時恢復自動播放
    • 這種設計允許用戶仔細查看某張圖片，提升瀏覽體驗

  • 初始化：確保頁面加載時第一個指示器處于激活狀態

6. 事件綁定與初始化

// 按鈕點擊事件
prevB.addEventListener('click',() => {prevImg();startAutoPlay();
});
nextB.addEventListener('click',() => {nextImg();startAutoPlay();
});// 容器懸停事件
const box = document.querySelector('.box');
box.addEventListener('mouseenter', stopAutoPlay);
box.addEventListener('mouseleave', startAutoPlay);// 初始化執行
initDots();
startAutoPlay();

事件綁定將所有功能串聯起來，形成完整的交互閉環：

  • 按鈕點擊：

    • 點擊后切換圖片
    • 同時重啟自動播放計時器（避免手動操作后立即自動切換）

  • 容器懸停：

    • 鼠標進入容器時暫停自動播放（方便用戶查看當前圖片）
    • 鼠標離開容器時恢復自動播放
    • 這個設計優先考慮了用戶主動瀏覽的需求

  • 初始化流程：

    1. 先初始化指示器（initDots()）
    2. 再啟動自動播放（startAutoPlay()）
    3. 確保頁面加載完成后輪播圖即可正常工作

聲明：源碼是本人的部分期末作業，以初學者的角度思考問題，代碼相對實際開發還欠缺優化，僅僅為初學者提供思路，歡迎大佬提出優化意見。

源碼：

<!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>.box{width: 1000px;height: 500px;position: relative;margin: 15px auto;}.box-img img{width: 1000px;height: 500px;position: absolute;top: 0;left: 0;}.box-img{opacity: 0;transition: opacity 0.5s ease-in-out;}.box-img:nth-child(1){opacity: 1;}.left,.right{opacity: 0;position: absolute;transform: translateY(-50%);top: 225px;width: 35px;height: 35px;align-items: center;justify-content: center;border-radius: 50%;z-index: 10;cursor: pointer;background-color: rgba(0,0,0,0.2);color: white;font-size: 24px;transition: all 0.3s ease; /* 按鈕自身的動畫效果 */display: flex;}.box:hover .left, .box:hover .right{opacity: 1;}.left{left: 10px;}.right{right: 10px;}.left::before, .right::before{content: '';width: 12px;height: 12px;border-top: 2px solid white;border-left: 2px solid white;}.left::before{transform: translateX(2px) rotate(-45deg);}.right::before{transform: translateX(-2px) rotate(135deg);}.left:hover, .right:hover{background-color: rgba(0,0,0,0.7);transform: translateY(-50%) scale(1.1);opacity: 1; box-shadow: 0 0 15px rgba(255,255,255,0.3);}.dot{position: absolute;bottom: 15px;right: 70px;}.dot ul{padding: 0;margin: 0;list-style: none;}.dot ul li{width: 10px;height: 10px;border-radius: 100%;background-color: #737171;float: left;margin-right: 15px;cursor: pointer;transition: all 0.3s ease;}.dot ul li.active{background-color: #ffffff;transform: scale(1.4);box-shadow: 0 0 8px rgba(255,255,255,0.8);}</style>
</head>
<body>
<div class="box"><!-- 輪播圖片容器 --><div class="box-img"><img src="img/albumFolklore.jpg"> </div><div class="box-img"><img src="img/albumST.jpg"> </div><div class="box-img"><img src="img/albumSpring.jpg" > </div><div class="box-img"><img src="img/albumNTM.jpg"> </div> <!-- 左右切換按鈕 --><div class="left"> </div><div class="right"> </div><!-- 指示器（小圓點） --><div class="dot"><ul id="dot-list"><li class="active" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div></div>
<script>
const imgs = document.querySelectorAll('.box-img');
const prevB = document.querySelector(".left");
const nextB = document.querySelector('.right');
const dots = document.getElementById('dot-list').querySelectorAll('li');let currentIndex = 0;
const imgCnt = imgs.length;//初始化
function initDots(){dots.forEach((dot,index) => {//點擊dot.addEventListener('click',() => {switchToImg(index);startAutoPlay();});//移入dot.addEventListener('mouseenter',() => {switchToImg(index);stopAutoPlay();})//離開dot.addEventListener('mouseleave',startAutoPlay);dot.setAttribute('data-index',index)});dots[0].classList.add('active');
}//切換
function switchToImg(index) {imgs.forEach( img => {img.style.opacity = 0;});imgs[index].style.opacity=1;currentIndex = index;dots.forEach(dot => {dot.classList.remove('active');});dots[index].classList.add('active')
}//向左切換
function prevImg(){currentIndex = (currentIndex - 1 + imgCnt) % imgCnt;switchToImg(currentIndex);
}//向右切換
function nextImg(){currentIndex = (currentIndex + 1) % imgCnt;switchToImg(currentIndex);
}//計時器
let autoTimer = null;
function startAutoPlay(){stopAutoPlay();autoTimer = setInterval(nextImg,3000);
}function stopAutoPlay(){clearInterval(autoTimer);
}//事件綁定
prevB.addEventListener('click',() => {prevImg();startAutoPlay();
});
nextB.addEventListener('click',() => {nextImg();startAutoPlay();
});initDots();
startAutoPlay();const box = document.querySelector('.box');
box.addEventListener('mouseenter',stopAutoPlay);
box.addEventListener('mouseleave',startAutoPlay);
</script>
</body>
</html>

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

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

相關文章

機器學習--PCA降維

機器學習--PCA降維

一核心部分 1解決的問題&#xff1a;應對高維數據帶來的計算量大、冗余信息多、易出現過擬合等問題&#xff0c;在減少數據維度的同時盡可能保留原始數據的關鍵信息。2核心思想&#xff1a…
閱讀更多...
leetcode 1277. 統計全為 1 的正方形子矩陣 中等

leetcode 1277. 統計全為 1 的正方形子矩陣 中等

給你一個 m * n 的矩陣&#xff0c;矩陣中的元素不是 0 就是 1&#xff0c;請你統計并返回其中完全由 1 組成的 正方形 子矩陣的個數。示例 1&#xff1a;輸入&#xff1a;matrix [[0,1,1,1],[1,1,1,1],[0,1,1,1] ] 輸出&#xff1a;15 解釋&#xff1a; 邊長為 1 的正方形有…
閱讀更多...
知識蒸餾 - 各類概率分布

知識蒸餾 - 各類概率分布

知識蒸餾 - 各類概率分布 flyfish一、離散概率分布 離散分布描述的是取值為離散值&#xff08;如0,1,2,…&#xff09;的隨機變量的概率規律&#xff0c;通常用概率質量函數&#xff08;PMF&#xff09; 表示某一取值的概率。 1. 伯努利分布&#xff08;Bernoulli Distribution…
閱讀更多...
軟件測試-Selenium學習筆記

軟件測試-Selenium學習筆記

""" 目標&#xff1a; driver.find_element() 需求&#xff1a; 1. 使用driver.find_element()方法 2. 輸入用戶名&#xff1a;admin 3. 輸入密碼&#xff1a;123456 """ # 導包 from selenium import webdriver from time import …
閱讀更多...
知微傳感3D相機上位機DkamViewer使用：給相機升級固件

知微傳感3D相機上位機DkamViewer使用：給相機升級固件

寫在前面 本人從事機器視覺細分的3D相機行業。編寫此系列文章主要目的有&#xff1a; 1、便利他人應用相機&#xff0c;本系列文章包含公司所出售相機的SDK的使用例程及詳細注釋&#xff1b;2、促進行業發展及交流。 知微傳感Dkam系列3D相機可以應用于定位分揀、焊接焊縫提取、…
閱讀更多...
CMake進階: CMake Modules---簡化CMake配置的利器

CMake進階: CMake Modules---簡化CMake配置的利器

目錄 1.簡介 2.為什么需要 CMake Modules&#xff1f; 3.內置模塊&#xff1a;開箱即用的工具 3.1.依賴查找模塊&#xff08;FindXXX.cmake&#xff09; 3.2.功能檢測模塊&#xff08;CheckXXX.cmake&#xff09; 3.3.通用工具模塊&#xff08;如 FetchContent.cmake、CT…
閱讀更多...
【Docker】Ubuntu上安裝Docker（網絡版）

【Docker】Ubuntu上安裝Docker（網絡版）

【Docker】Ubuntu上安裝Docker注意&#xff1a;一、環境準備1. 系統要求2. 卸載舊版本二、安裝步驟1.配置倉庫源2.安裝 Docker引擎3.驗證安裝情況三、解決報錯1、檢查網絡連接2、檢查Docker服務狀態3、換源4.重載生效、重啟服務、查看是否配置成功5.驗證解決情況四、權限與配置…
閱讀更多...
Socket 編程 TCP

Socket 編程 TCP

TCP 網絡程序 和剛才 UDP 類似. 實現一個簡單的英譯漢的功能。TCP是面向字節流的可靠傳輸&#xff0c;如同前文的管道流&#xff0c;只要是流&#xff0c;它的操作就是文件的寫出與讀入。TCP socket API 詳解下面介紹程序中用到的 socket API,這些函數都在 sys/socket.h 中。so…
閱讀更多...
使用AWS S3 + Lambda + MediaConvert 實現上傳視頻文件并自動轉碼

使用AWS S3 + Lambda + MediaConvert 實現上傳視頻文件并自動轉碼

前言 最近團隊在做短視頻平臺的技術調研&#xff0c;其中有一個環節便是音視頻開發&#xff0c;即對用戶上傳的視頻進行自適應轉碼。自適應的原理其實就是預先將視頻轉換為幾個常用的分辨率&#xff0c;app端根據用戶手機分辨率拉取相應分辨率的視頻。 目前嘗試了兩種方案&…
閱讀更多...
QT之QWaitCondition降低cpu占用率，從忙等待到高效同步

QT之QWaitCondition降低cpu占用率，從忙等待到高效同步

在多線程編程中&#xff0c;線程間的同步是一個核心問題。在處理線程等待時&#xff0c;經常會寫出高CPU占用率的代碼&#xff0c;其中最典型的就是使用忙等待&#xff08;busy waiting&#xff09;。本文將詳細介紹如何使用Qt框架中的QWaitCondition類來優雅地解決這一問題&am…
閱讀更多...
pcl求平面點云的邊界凸包點

pcl求平面點云的邊界凸包點

基本流程1&#xff0c;讀入點云&#xff0c;并去除無效點2&#xff0c;擬合平面3&#xff0c;去除離平面距離較遠的點4&#xff0c;對點云進行平面投影5&#xff0c;進行convex_hull運算初學者&#xff0c;暫時不知道能用來干嘛。練手還是非常不錯的&#xff01;#define _CRT_S…
閱讀更多...
Windows系統上使用GIT

Windows系統上使用GIT

首先破除一下畏懼心理&#xff1a;在Windows上使用git和在linux系統中的使用方法是一樣的&#xff0c;只是安裝方式沒那么便捷&#xff0c;畢竟linux中安裝git只需要一行命令 GIT下載地址 如果你的電腦的CPU是64位的&#xff0c;就點擊&#xff1a; Git-2.50.1-64-bit.exe 如果…
閱讀更多...
《設計模式之禪》筆記摘錄 - 17.模板方法模式

《設計模式之禪》筆記摘錄 - 17.模板方法模式

模板方法模式的定義模板方法模式(Template Method Pattern)是如此簡單&#xff0c;以致讓你感覺你已經能夠掌握其精髓了。其定義如下&#xff1a;Define the skeleton of an algorithm in an operation, deferring some steps to subclasses.Template Method lets subclasses r…
閱讀更多...
SpreadJS 協同服務器 MongoDB 數據庫適配支持

SpreadJS 協同服務器 MongoDB 數據庫適配支持

為了支持 SpreadJS 協同編輯場景&#xff0c;協同服務器需要持久化存儲文檔、操作、快照及里程碑數據。本文介紹了 MongoDB 數據庫適配器的實現方法&#xff0c;包括集合初始化、適配器接口實現以及里程碑存儲支持。 一、MongoDB 集合初始化 協同編輯服務需要以下集合&#x…
閱讀更多...
Ubuntu 主機名：精通配置與管理

Ubuntu 主機名：精通配置與管理

主機名&#xff08;hostname&#xff09;是Linux系統中用于標識網絡上特定設備的名稱&#xff0c;它在網絡通信、服務配置&#xff08;如 Kubernetes 集群、數據庫&#xff09;以及日志記錄中扮演著至關重要的角色。對于初學者來說&#xff0c;配置主機名似乎很簡單&#xff0c…
閱讀更多...
C/C++ 協程：Stackful 手動控制的工程必然性

C/C++ 協程：Stackful 手動控制的工程必然性

&#x1f680; C/C 協程&#xff1a;Stackful 手動控制的工程必然性 引用&#xff1a; C/C 如何正確的切換協同程序&#xff1f;&#xff08;基于協程的并行架構&#xff09; #mermaid-svg-SXgplRf3WRYc8A7l {font-family:"trebuchet ms",verdana,arial,sans-serif;…
閱讀更多...
新手向：使用STM32通過RS485通信接口控制步進電機

新手向：使用STM32通過RS485通信接口控制步進電機

新手向&#xff1a;使用STM32通過RS485通信接口控制步進電機 準備工作 本文使用的STM32芯片是STM32F407ZGTx&#xff0c;使用的電機是57步進電機&#xff0c;驅動器是用的是時代超群的RS485總線一體化步進電機驅動器&#xff08;42 型&#xff1a;ZD-M42P-485&#xff09;。使…
閱讀更多...
設計模式筆記_行為型_命令模式

設計模式筆記_行為型_命令模式

1.命令模式介紹命令模式&#xff08;Command Pattern&#xff09;是一種行為設計模式&#xff0c;它將請求或操作封裝為對象&#xff0c;使得可以用不同的請求對客戶端進行參數化。命令模式的核心思想是將方法調用、請求或操作封裝到一個獨立的命令對象中&#xff0c;從而使得客…
閱讀更多...
詳解MySQL中的多表查詢：多表查詢分類講解、七種JOIN操作的實現

詳解MySQL中的多表查詢：多表查詢分類講解、七種JOIN操作的實現

精選專欄鏈接 &#x1f517; MySQL技術筆記專欄Redis技術筆記專欄大模型搭建專欄Python學習筆記專欄深度學習算法專欄 歡迎訂閱&#xff0c;點贊&#xff0b;關注&#xff0c;每日精進1%&#xff0c;與百萬開發者共攀技術珠峰 更多內容持續更新中&#xff01;希望能給大家帶來…
閱讀更多...
vue3+elemeent-plus, el-tooltip的樣式修改不生效

vue3+elemeent-plus, el-tooltip的樣式修改不生效

修改后的樣式&#xff0c;直接貼圖&#xff0c;經過刪除出現懸浮1、在書寫代碼的時候切記effect“light”&#xff0c;如果你需要的是深色的樣式:disabled"!multiple" 是否禁用<el-tooltip effect"light" placement"top" content"請先選…
閱讀更多...
最新文章

Copyright @ 2022~2023