简单左右循环轮播图

初学前端，写了一个简单的左右轮播图，用原生js实现。

效果：https://jsfiddle.net/mgc37h7L/

原理：显示图片的div，宽高写死，并且溢出隐藏。ul里面是要显示的图片，li使用浮动，横向排列。要想实现移动过渡效果，设置ul的position为absolute，切换一张图片，ul就左移一张图片的宽度。所以ul的父容器div的position为relative。要实现两张图片的切换移动效果，使用transition。图片的宽高要与div一样。比如有4张图片，要把第1张复制到第4张图片后面，这样就有了5张图片。从第4张走到第5张图片，就相当于走到了第1张图片。后来用div代替了ul和li，原理一样，只不过div设置inline-block，为了避免inline-block带来的空白间距，设置font-size为0(Chrome下这么设置，其他浏览器没试)。

布局如下：

<div class="con_roa">
    <div class="roa">
        <div class="roa__img"><img src="img/bg1.jpg"></div>
        <div class="roa__img"><img src="img/bg2.jpg"></div>
        <div class="roa__img"><img src="img/bg3.jpg"></div>
        <div class="roa__img"><img src="img/bg4.jpg"></div>
    </div>
</div>

css如下：

.con_roa {
            height: 300px;
            overflow: hidden;
            position: relative;
            width: 500px;
        }

        .roa {
            font-size: 0;
            position: absolute;
            transition: left 0.5s;
            width: 5000px;
        }

        .roa__img {
            display: inline-block;
        }

        .roa__img img {
            height: 300px;
            width: 500px;
            vertical-align: middle;
        }

　js如下：

   为了方便解释，用roa代表上文的类名为.roa的div。

 var current = 0;
    var roa = document.querySelector('.roa');
    roa.appendChild(roa.firstElementChild.cloneNode(true));
    var len = roa.childElementCount;

    function play() {
        if (current === len) {
            current = 2;
            //下面两句是跑到最后一张，即第5张图片时候，让roa回到起点，即0的位置。设置trasition为'hello'是为了覆盖原有的transition属性，
            // 让roa跳回原位置时候是瞬间跳回，而不是有个动画。由于第一张图片和最后一张图片相同，在roa从第5张跳到第1张图片时候，
            // 不会看到什么变化，相当于是第4张图片跑完了下一张图片就是roa的第一张。
            roa.style.transition = 'hello';
            roa.style.left = 0 + 'px';
            //下面这个定时器，是为了确保上下两句代码都会执行，并且定时器里代码会在上面两句执行以后再立即执行。
            // 如果这四句代码放一起，由于功能重复，js优化机制会跳过上面两句代码。
            setTimeout(function () {
                roa.style.transition = 'left 0.5s';
                roa.style.left = '-500px';
            });
        } else {
            roa.style.transition = 'left 0.5s';
            roa.style.left = -500 * current + 'px';
            current++
        }
    }
    play();
    var timer = setInterval(play, 1500);

 

　　很简单的左右轮播实现了。左右点击和下方小圆点，以后再加吧。