本文將實(shí)現(xiàn)如上所示的輪播圖。源代碼 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E6%9E%9C)

一、功能介紹

該輪播圖主要包含以下功能：

箭頭切換：點(diǎn)擊左右箭頭可以向左或向右切換圖片

無(wú)限滾動(dòng)：圖片可以實(shí)現(xiàn)循環(huán)播放

圓點(diǎn)切換：點(diǎn)擊圖片下方的圓點(diǎn)實(shí)現(xiàn)圖片切換，且圓點(diǎn)跟隨圖片進(jìn)行切換

動(dòng)畫函數(shù)：圖片之間切換時(shí)有滾動(dòng)效果，而不是直接切換

自動(dòng)播放：當(dāng)鼠標(biāo)離開(kāi)圖片時(shí)，每隔 3 秒切換一次

二、原理介紹

輪播圖可以理解為一個(gè)雙端隊(duì)列，每張圖片就是隊(duì)列里的元素。overflow: hidden 就是將下圖中最右邊的圖片隱藏，只保留最左邊的圖片。而圖片之間的滾動(dòng)則是通過(guò)改變

中的 left 值實(shí)現(xiàn)的。

三、關(guān)鍵知識(shí)點(diǎn)

面試時(shí)要回答出以下知識(shí)點(diǎn)，理解它們是如何運(yùn)用到輪播圖中的?？梢詭е@些問(wèn)題來(lái)閱讀本文。

style="left: -600px"overflow: hiddenfloat: leftsetTimeoutsetInterval

四、最終代碼

五、部分代碼

1. html 結(jié)構(gòu)

html 結(jié)構(gòu)如下:

一個(gè)總體的 作為輪播圖整體的容器 用來(lái)保存 5 張圖片 五個(gè)小圓點(diǎn) 標(biāo)簽作為左箭頭 標(biāo)簽作為右箭頭

HTML 代碼如下：

CSS 代碼如下：

問(wèn)題 ：為什么多設(shè)置了兩張圖片？

其實(shí)原理介紹中的動(dòng)圖已經(jīng)告訴我們了，最后一張圖之后意味著所有圖片已經(jīng)全部彈出到隊(duì)列左端，這時(shí)需要將所有圖片再次重新入隊(duì)來(lái)實(shí)現(xiàn)循環(huán)切換，這段時(shí)間顯示的是一段空白。為了使切換更平滑，原本的 1-2-3-4-5, 1-2-3-4-5 就成了 1-2-3-4-5-(1'-1)-2-3-4-5，也就是說(shuō)我們看到的 第 5 張之后的第 1 張圖片實(shí)際上是 (1'-1) 兩張圖。

2. 箭頭切換

箭頭切換即在頁(yè)面加載之后，點(diǎn)擊左右箭頭，改變對(duì)應(yīng)圖片的 left 值。因此我們需要在 window.onload 中分別對(duì)兩個(gè)箭頭 next 和 prev 添加 onclick 事件。

3. 無(wú)限滾動(dòng)

無(wú)限滾動(dòng)即使用問(wèn)題 1 的思路，首尾多加一張圖片，除此之外，還需要在每切換一張圖片時(shí)，點(diǎn)亮對(duì)應(yīng)的小圓點(diǎn)，即小圓點(diǎn)的 。

4. 圓點(diǎn)切換

這部分的實(shí)現(xiàn)邏輯與點(diǎn)擊指針的邏輯相似，不同的是，箭頭只能依次切換，圓點(diǎn)可以切換到任意圖片上，所以需要在 button 上添加 onclick 事件，并點(diǎn)亮該 button。

5. 動(dòng)畫函數(shù)

這里定義一個(gè)函數(shù) go()，根據(jù)圖片位移的總時(shí)間和每?jī)纱挝灰浦g的間隔時(shí)間，計(jì)算出每次的位移距離，然后使用 setTimeout 實(shí)現(xiàn)出圖片切換時(shí)逐漸向左移動(dòng)的效果。

6. 自動(dòng)播放

當(dāng)鼠標(biāo)離開(kāi)圖片區(qū)時(shí)，每隔 3 秒切換一次；當(dāng)鼠標(biāo)位于圖片區(qū)時(shí)，自動(dòng)播放停止。這時(shí)我們需要監(jiān)聽(tīng)鼠標(biāo)時(shí)間，用 setInterval 實(shí)現(xiàn)自動(dòng)播放。setInterval 與 setTimeount 的區(qū)別是 setTimeout 只執(zhí)行一次，setInterval 每隔一段時(shí)間就會(huì)執(zhí)行一次，一直執(zhí)行下去。

如有問(wèn)題，歡迎討論，謝謝！

參考鏈接

https://www.imooc.com/video/665https://www.cnblogs.com/zhuzhenwei918/p/6416880.htmlhttps://carbon.now.sh/

往期推薦：

騰訊前端秋招面試(提問(wèn)篇)騰訊前端秋招面試(解答篇)前端面試：JS 編程題目總結(jié)(一)前端面試：CSS 編程題目總結(jié)(一)字節(jié)前端面試：行內(nèi)元素設(shè)置margin

總結(jié)

以上是生活随笔為你收集整理的置顶带滚动效果_前端面试：如何实现轮播图效果？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。