一.實(shí)現(xiàn)思路

?實(shí)現(xiàn)效果：

1. css

將垂直排列的多張圖片水平排列，可以使用浮動(dòng)；或?qū)鼒D片的盒子設(shè)置為行內(nèi)塊元素inline-block，并消除空白折疊。

2. js

1)?如何讓圖片水平移動(dòng)?

將包裹所有圖片的總?cè)萜髟O(shè)置為絕對(duì)定位，通過修改left屬性展示需要的圖片，切換left屬性時(shí)一般使用過渡效果transition；

2) 首尾如何無縫切換圖片?

在最后一張圖片之后加上第一張輪播圖，當(dāng)顯示添加的第一張輪播圖后將left屬性修改為真正第一張輪播圖的left值，切換時(shí)取消過渡效果；同理在第一張輪播圖之前加上最后一張輪播圖...

3) 輪播圖切換細(xì)節(jié)?

每次切換一張輪播圖是以一張輪播圖的寬度為單位，改變?nèi)萜鱨eft值；通過設(shè)置全局屬性index，指定偏離量，如：顯示第一張圖即index=1，left = '-' + index * picWidth + 'px'，圖片左移一張需要將index++，右移一張圖片需要將index--。

4) 自動(dòng)播放和圓點(diǎn)切換原理??

將左移一張圖片和右移一張圖片各封裝成函數(shù)leftMoveSwiper()和rightMoveSwiper()，自動(dòng)播放時(shí)設(shè)置定時(shí)器，定時(shí)執(zhí)行l(wèi)eftMoveSwiper()，鼠標(biāo)進(jìn)入輪播圖區(qū)域時(shí)取消定時(shí)器clearInterval(timer)，改為手動(dòng)切換模式；

隨后獲取圓點(diǎn)的下標(biāo)索引，找到原點(diǎn)下標(biāo)和index之間的對(duì)應(yīng)關(guān)系，修改index值，隨后調(diào)用一次leftMoveSwiper()切換到指定的位置。

5)?圓點(diǎn)切換如何使用事件委托?

使用事件委托，將點(diǎn)擊事件綁定給原點(diǎn)的父容器wrapper，通過事件對(duì)象event.target獲取點(diǎn)擊的目標(biāo)元素，通過event.target.classList.contains(‘指定類名’)判斷是否為需要操作的目標(biāo)元素(即圓點(diǎn))。

3.代碼

html部分：

<div class="app"><ul class="wrapper"><li class="liWrapper"><a href="#" class="link"><img src="./img/p5.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p1.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p2.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p3.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p4.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p5.jpg" alt="" class="img"></a></li><li class="liWrapper"><a href="#" class="link"><img src="./img/p1.jpg" alt="" class="img"></a></li></ul><i class="iconfont icon-arrow-left"></i><i class="iconfont icon-arrow-right"></i><div class="dot"><span></span><span></span><span></span><span></span><span></span></div> </div> <script src="./index.js"></script>

? css部分：

* {margin:0;padding:0;box-sizing:border-box;/* overflow: hidden; */}.app{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);height: 280px;width: 520px;overflow: hidden;border-radius: 8px;/* display: block; */}.app:hover .iconfont{display:block;}.wrapper{z-index:1;display: block;position: absolute;list-style:none;/* 處理空白折疊 */ font-size: 0; }.liWrapper{display:inline-block;}.iconfont {position:absolute;z-index:2;font-size:24px;height:24px;color: blanchedalmond;background-color: rgba(0,0,0,0.3);cursor:pointer;display:none;}.icon-arrow-left{top:50%;left:-5px;border-radius: 0 12px 12px 0;transform:translateY(-50%);}.icon-arrow-right{top:50%;right:-5px;border-radius: 11px 0 0 11px;transform:translateY(-50%);}.dot {z-index:2;position:absolute;bottom:15px;left:50%;transform: translateX(-50%);background-color: rgba(255,255,255,.3);border-radius: 6px;font-size: 0;}.dot span {display: inline-block;width: 8px;height: 8px;margin: 3px;border-radius: 4px;background-color: #fff;}.dot-active {background-color: #ff5500!important;}

?js部分：

let perWidth = 520; // 一張圖片的寬度let wrapper = document.querySelector('.wrapper');let app = document.querySelector('.app');let liWrapper = document.querySelectorAll('.liWrapper');let dots = document.querySelector('.dot').children; let preTime = 0; // 上一刻時(shí)間，處理防抖wrapper.style.width = perWidth * liWrapper.length + 'px'; // 獲取并設(shè)置圖片容器的總寬度// 當(dāng)前是第幾張圖片let index = 1;// 定時(shí)器標(biāo)識(shí)let timer;// wrapper 初始化function swiperInit() {wrapper.style.left = '-' + perWidth * index + 'px'; }// 左移輪播圖function leftMoveSwiper() {index ++;wrapper.style.left = '-' + perWidth * index + 'px';wrapper.style.transition = 'left 1s'; if(index >= liWrapper.length - 1) {setTimeout(() => {index = 1;wrapper.style.transition = 'none';wrapper.style.left = '-' + perWidth * index + 'px'; setDotColor();},1000)}setDotColor();}// 右移輪播圖function rightMoveSwiper() {index --;wrapper.style.left = '-' + perWidth * index + 'px'; wrapper.style.transition = 'left 1s'; if(index <= 0) {setTimeout(() => {index = 5;wrapper.style.transition = 'none';wrapper.style.left = '-' + perWidth * index + 'px'; },1000)}setDotColor();}// 自動(dòng)播放function autoplaySwiper() {timer = setInterval(() => {leftMoveSwiper();},2000);}// 事件綁定function handleBind(){// 利用事件委托，給箭頭綁定點(diǎn)擊事件app.addEventListener('click',function(e){if(e.target.classList.contains('icon-arrow-left')) {throttle(rightMoveSwiper,1000);} else if(e.target.classList.contains('icon-arrow-right')) {throttle(leftMoveSwiper,1000);}});// 鼠標(biāo)進(jìn)入暫停自動(dòng)輪播app.addEventListener('mouseenter',function(){clearInterval(timer);});// 鼠標(biāo)離開繼續(xù)自動(dòng)輪播app.addEventListener('mouseleave',function(){autoplaySwiper();})}// 防抖處理function throttle(fn,delay) {let now = Date.now();if(now - preTime >= delay) {fn();preTime = now;}}// dot顏色設(shè)置function setDotColor() {for (let i = 0; i < dots.length; i++) {if(index === i + 1){dots[i].classList.add('dot-active');} else {dots[i].classList.remove('dot-active')}if(index === dots.length + 1) {dots[0].classList.add('dot-active');} else if(index === 0) {dots[dots.length - 1].classList.add('dot-active');}}}// 點(diǎn)擊原點(diǎn)切換輪播圖function pointDotChangePic(){for (let i = 0; i < dots.length; i++) {dots[i].addEventListener('click',function(){index = i;leftMoveSwiper();}) }}// 初始化設(shè)置function init(){swiperInit();autoplaySwiper();handleBind();setDotColor();pointDotChangePic();}init();

二.問題

z-index無效原因

這種情況發(fā)生的條件有三個(gè)：

1、父標(biāo)簽 position屬性為relative；

2、問題標(biāo)簽無position屬性（不包括static）；

3、問題標(biāo)簽含有浮動(dòng)(float)屬性。

空白折疊

display為inline的元素之間，若這些元素標(biāo)簽之間不寫在同一行上，瀏覽器會(huì)在這些元素之間加上一格空白，空白大小視font-size值大小，去除空白只需將這些元素的共同父元素font-size值設(shè)置為0；

line-height 無效原因

已知父元素dots，子元素dot，子元素設(shè)為inline-block，為解決子元素出現(xiàn)的空白折疊，將父元素font-size設(shè)為0，此時(shí)為了讓子元素垂直居中，設(shè)置line-height無效，原因是字體font-size為0

解決辦法是將子元素的margin-top和margin-bottom設(shè)置為一個(gè)相同的值，如4px

總結(jié)

以上是生活随笔為你收集整理的【JS】原生淘宝轮播图实现总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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