原生js实现轮播图

最近用原生js写了个很初级的轮播图，记录一下。

轮播图原理

大小相同的几张图片并排，经过css布局隐藏其余图片而只显示一张图片，经过设置left偏移量的不一样来显示不一样的图片。

基础布局

分红图片显示框，容纳并排几张图片的容器，左右切换的箭头，显示图片顺序及点击切换图片的小圆点部分

为了无缝滑动，复制第一张图片放在最后一张图片后面做为辅助图片。

<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操做

首先获取所需的变量和属性

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;//设置定时器变量

图片切换事件，更改图片的偏移量，设置小圆点样式

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';//设置小圆点样式
            }           
        }

箭头切换事件，左箭头减小索引值，右箭头增长索引值

//右箭头切换事件
        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;

最终显示效果

预览地址：https://zhaohh.github.io/slideshow/lunbo.html