原生JS實(shí)現(xiàn)滑動輪播圖

ningwang 發(fā)布于2019-08-30 15:43 / 1935人閱讀

摘要：效果實(shí)現(xiàn)原理純粹只使用了發(fā)現(xiàn)還是比較簡單的，并不需要借助別的插件或類庫來實(shí)現(xiàn)核心是把圖片組合成一行序列，通過左右移動，以及父元素的來決定顯示的圖片簡單畫了一下搭建基本界面這里主要分成三個(gè)部分，兩個(gè)向左向右的箭頭，圓點(diǎn)序列，圖片序列全

效果

實(shí)現(xiàn)原理

純粹只使用了html+css+JS
發(fā)現(xiàn)還是比較簡單的，并不需要借助別的插件或類庫來實(shí)現(xiàn)
核心是把圖片組合成一行序列，通過左右移動，以及父元素的overflow：hidden來決定顯示的圖片
簡單畫了一下：

搭建基本界面

這里主要分成三個(gè)部分，兩個(gè)向左向右的箭頭，圓點(diǎn)序列，圖片序列
全部運(yùn)用絕對定位對其布局，通過z-index確定他們的層疊關(guān)系
事先定義圖片的寬度高度作為css變量，方便各元素計(jì)算確定高度寬度

    #box {
    position:relative;
    width:var(--imageWidth);
    height:var(--height);
    overflow: hidden;
    }
    #multi-circles {
    position:absolute;
    right:30px;
    bottom:10px;
    z-index: 2;
    }
    #multi-images {
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:calc(var(--imageWidth)*5);
    height:var(--height);
    }
    #arrow-right,
    #arrow-left {
    position: absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    z-index: 3;
    }
    #arrow-right {
    right:0;
    }
    #arrow-left {
    left:0;
    }

確定圖片序號

為了實(shí)現(xiàn)輪播，我們得知道現(xiàn)在應(yīng)該要顯示哪一張圖片
在js中定義變量currentIndex，表示當(dāng)前顯示圖片的序號，初始為0
當(dāng)點(diǎn)擊箭頭，或者鼠標(biāo)移動到圓點(diǎn)上時(shí)，只要改變序號就可以了

//先dom操作，獲取html組件
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles").getElementsByTagName("li");
var box=document.getElementById("box");

//為箭頭和圓點(diǎn)綁定事件
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (let i = 0; i < circles.length; i++) {
        circles[i].setAttribute("id", i);
        circles[i].addEventListener("mouseenter", overCircle);
}

//滑過圓點(diǎn)
function overCircle() {
    currentIndex = parseInt(this.id);
}
//左箭頭
function preMove() {
    if (currentIndex != 0) {
        currentIndex--;
    }
    else {
        currentIndex = 4;
    }
}
//右箭頭
function nextMove() {
    if (currentIndex != 4) {
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

滑動

現(xiàn)在我們已經(jīng)知道了現(xiàn)在應(yīng)該顯示哪一張圖片，那要怎么顯示呢？
上面我們已經(jīng)說過了滑動的原理是改變圖片序列的位置，左右移動
加上父元素的overflow：hidden來只顯示對應(yīng)圖片
于是只要寫這樣一個(gè)函數(shù)，加到之前的事件里

function moveImage() {
    multiImages.style.left = -currentIndex * 400 + "px";
}

這樣是生硬的跳動，為了實(shí)現(xiàn)滑動
網(wǎng)上有自己編寫animate函數(shù)，或者用jquery的函數(shù)的方法
這里我想到了直接用css3的transition屬性
只要在圖片序列的css類下加一句

#multi-images {
     transition: 1s;
}

就可以實(shí)現(xiàn)自然的滑動

圓點(diǎn)顏色

我們希望當(dāng)顯示圖片的時(shí)候，對應(yīng)圓點(diǎn)的顏色可以變?yōu)榧t色
把現(xiàn)在的圓點(diǎn)變色很簡單，只要currentIndex這一個(gè)變量就可以幫助實(shí)現(xiàn)
但還要把前一個(gè)顯示的圓點(diǎn)變回白色
誠然，可以先用一個(gè)for循環(huán)，把所有圓點(diǎn)都變成白色
但這樣就出現(xiàn)了多余的工作，我們明明只要變一個(gè)圓點(diǎn)的顏色就好
于是新定義一個(gè)變量preIndex，記錄前一個(gè)顯示的圖片
只要在先前綁定的事件函數(shù)中，第一句先令preIndex=currentIndex
就在圖片序號改變前保存到了前一個(gè)序號
然后在事件末尾添加這樣一個(gè)函數(shù)

function changeCircleColor(preIndex, currentIndex) {
    circles[preIndex].style.backgroundColor = "rgb(240, 240, 240)";
    circles[currentIndex].style.backgroundColor = "rgb(245, 40, 40)";
}

懸浮箭頭

我們希望當(dāng)鼠標(biāo)放到輪播圖上時(shí)，左右箭頭才顯示
于是先讓箭頭的display為none

#arrow-right,
#arrow-left {
display:none;
}

給box添加mouseover事件

box.addEventListener("mouseover",function() {
    arrowLeft.style.display="block";
    arrowRight.style.display="block";
});

鼠標(biāo)放到箭頭上時(shí)，鼠標(biāo)變成點(diǎn)擊樣式

#arrow-right,
#arrow-left {
cursor:pointer;
}

自動輪播

目前為止已經(jīng)完成了基本的工作
不過我們還希望它可以自動輪播
當(dāng)鼠標(biāo)放到輪播圖上時(shí)，輪播暫停
于是我們建立一個(gè)定時(shí)器
當(dāng)鼠標(biāo)放到box上，清除定時(shí)器，離開則重新建立

timer=setInterval(nextMove,2000);
box.addEventListener("mouseover",function() {
    clearInterval(timer);
});
box.addEventListener("mouseout",function() {
    timer=setInterval(nextMove,2000);
});

小插曲

在制作的時(shí)候，還遇到了一個(gè)很奇怪的bug
是鼠標(biāo)移動到圓點(diǎn)的左邊一點(diǎn)點(diǎn)時(shí)，也會觸發(fā)事件變色
后來換了淺色背景，才發(fā)現(xiàn)是因?yàn)?li>的默認(rèn)樣式
圓點(diǎn)的左邊還有一個(gè)很小的圓點(diǎn)

去除這個(gè)樣式即可

ul,
li {
    list-style: none;
}

完整代碼

代碼地址:https://github.com/ssevenk/Ca...

云服務(wù)器 GPU云服務(wù)器滑動輪播 jquery滑動輪播原生js實(shí)現(xiàn) ajax原生js實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116031.html

發(fā)表評論

登陸后可評論

0條評論

ningwang

男|高級講師

我要關(guān)注我要私信

TA的文章

liteserver：荷蘭大硬盤vps;1核/1G內(nèi)存/512G HDD/1G帶寬/10T月流量,€

閱讀 1991·2021-09-26 10:19
Totyun：上新柬埔寨VPS，2核2G內(nèi)存，10Mps Premium 中國，$12/月起

閱讀 3265·2021-09-24 10:25
UCloud優(yōu)刻得海外混合云上線實(shí)現(xiàn)全球混合多云互聯(lián)

閱讀 1653·2019-12-27 11:39
原生JS實(shí)現(xiàn)滑動輪播圖

閱讀 1936·2019-08-30 15:43
為你推薦幾款開發(fā)常用的代碼編輯器

閱讀 683·2019-08-29 16:08
css 響應(yīng)式（媒介查詢）

閱讀 3515·2019-08-29 16:07
深入了解JS數(shù)組的常用方法

閱讀 915·2019-08-26 11:30
vue-router 基礎(chǔ)知識點(diǎn)

閱讀 1278·2019-08-26 10:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生JS實(shí)現(xiàn)滑動輪播圖

相關(guān)文章