原生js實現輪播圖

時間 2019-11-17

標籤原生實現欄目 JavaScript 简体版

原文原文鏈接

最近用原生js寫了個很初級的輪播圖，記錄一下。css

輪播圖原理html

大小相同的幾張圖片並排，經過css佈局隱藏其餘圖片而只顯示一張圖片，經過設置left偏移量的不一樣來顯示不一樣的圖片。git

基礎佈局github

分紅圖片顯示框，容納並排幾張圖片的容器，左右切換的箭頭，顯示圖片順序及點擊切換圖片的小圓點部分ide

爲了無縫滑動，複製第一張圖片放在最後一張圖片後面做爲輔助圖片。佈局

<div id="container">
                <ul id="inner">
                    <li class="img-item"><a href="#"><img src="image/pic1.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic2.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic3.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic4.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic5.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic6.jpg"/></a></li>
                    <li class="img-item"><a href="#"><img src="image/pic1.jpg"/></a></li>
                </ul>
                <div>
                    <div class="arrow" id="left-arrow"><</div>
                    <div class="arrow" id="right-arrow">></div>
                </div>
                <ul id="circle">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>

JS操做this

首先獲取所需的變量和屬性code

var container = document.getElementById('container');
        var inner = document.getElementById('inner')
        var left = document.getElementById('left-arrow');
        var right = document.getElementById('right-arrow');
        var circleList = document.getElementById('circle').getElementsByTagName('li');
        var index = 0;
        var moveOffset = container.offsetWidth; //圖片的顯示寬度，基本偏移量
        var timer;//設置定時器變量

圖片切換事件，更改圖片的偏移量，設置小圓點樣式htm

function animate(){
            clearCircle();//清除全部小圓點樣式
            inner.style.left = index*moveOffset*(-1) + 'px';
            if(index == circleList.length){
                //輪播到最後一張索引值與下標值相同，偏移量變爲第一張，下標也變爲第一張
                inner.style.left = 0;
                index = 0;
                circleList[0].className = 'current';//設置小圓點樣式
            }else{
                circleList[index].className = 'current';//設置小圓點樣式
            }           
        }

箭頭切換事件，左箭頭減小索引值，右箭頭增長索引值blog

//右箭頭切換事件
        right.onclick = function(){
            index++;
            if(index > circleList.length){
                index = 0;              
            }
            animate();
        }
        //左箭頭切換事件
        left.onclick = function(){
            index--;
            if(index < 0){
                //爲了實現無縫連接，複製最後一張與第一張相同，下標變爲倒數第二張的，偏移量變爲最後一張的
                index = circleList.length-1;
                inner.style.left = (index+1) * moveOffset *(-1)+'px';
            }
            animate();
        }

小圓點清除樣式

function clearCircle(){
            for(var i=0; i< circleList.length; i++){
                circleList[i].className = '';
            }
        }

小圓點數字對應圖片順序

for(var i=0; i< circleList.length; i++){            
            circleList[i].onclick = function(){ 
                index = this.innerText-1;
                animate();
            }           
        }

自動輪播事件

function autoMove(){
            timer = setInterval(function(){
                right.onclick();
            },2000);
        }

鼠標放在圖片上中止輪播，鼠標移開繼續輪播

//鼠標處於圖片位置中止輪播
        container.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠標移開開始輪播
        container.onmouseout = autoMove;

最終顯示效果