原生JS實現滑動輪播圖

時間 2019-11-05

原文原文鏈接

效果

實現原理

純粹只使用了html+css+JS
發現仍是比較簡單的，並不須要藉助別的插件或類庫來實現
核心是把圖片組合成一行序列，經過左右移動，以及父元素的overflow：hidden來決定顯示的圖片
簡單畫了一下：
css

搭建基本界面

<div id="box">
            <img src="images/arrowleft.png" id="arrow-left">
            <img src="images/arrowright.png" id="arrow-right">
            <ul id="multi-circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="multi-images">
                <img src="images/1.jpg">
                <img src="images/2.jpg">
                <img src="images/3.jpg">
                <img src="images/4.jpg">
                <img src="images/5.jpg">
                <div class="clear"></div>
            </div>
        </div>

這裏主要分紅三個部分，兩個向左向右的箭頭，圓點序列，圖片序列
所有運用絕對定位對其佈局，經過z-index肯定他們的層疊關係
事先定義圖片的寬度高度做爲css變量，方便各元素計算肯定高度寬度html

#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;
    }

肯定圖片序號

爲了實現輪播，咱們得知道如今應該要顯示哪一張圖片
在js中定義變量currentIndex，表示當前顯示圖片的序號，初始爲0
當點擊箭頭，或者鼠標移動到圓點上時，只要改變序號就能夠了jquery

//先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");

//爲箭頭和圓點綁定事件
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);
}

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

滑動

如今咱們已經知道了如今應該顯示哪一張圖片，那要怎麼顯示呢？
上面咱們已經說過了滑動的原理是改變圖片序列的位置，左右移動
加上父元素的overflow：hidden來只顯示對應圖片
因而只要寫這樣一個函數，加到以前的事件裏css3

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

這樣是生硬的跳動，爲了實現滑動
網上有本身編寫animate函數，或者用jquery的函數的方法
這裏我想到了直接用css3的transition屬性
只要在圖片序列的css類下加一句git

#multi-images {
     transition: 1s;
}

就能夠實現天然的滑動github

圓點顏色

咱們但願當顯示圖片的時候，對應圓點的顏色能夠變爲紅色
把如今的圓點變色很簡單，只要currentIndex這一個變量就能夠幫助實現
但還要把前一個顯示的圓點變回白色
誠然，能夠先用一個for循環，把全部圓點都變成白色
但這樣就出現了多餘的工做，咱們明明只要變一個圓點的顏色就好
因而新定義一個變量preIndex，記錄前一個顯示的圖片
只要在先前綁定的事件函數中，第一句先令preIndex=currentIndex
就在圖片序號改變前保存到了前一個序號
而後在事件末尾添加這樣一個函數dom

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

懸浮箭頭

咱們但願當鼠標放到輪播圖上時，左右箭頭才顯示
因而先讓箭頭的display爲none函數

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

給box添加mouseover事件佈局

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

鼠標放到箭頭上時，鼠標變成點擊樣式this

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

自動輪播

目前爲止已經完成了基本的工做
不過咱們還但願它能夠自動輪播
當鼠標放到輪播圖上時，輪播暫停
因而咱們創建一個定時器
當鼠標放到box上，清除定時器，離開則從新創建

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