原生JS实现轮播图的几种方式

I 绝对定位+透明度

原理：首先，将所有轮播图以绝对定位的方式定位父元素的相同位置；接着，实现上下键按钮修改active的下标；最后，将所有图片透明度重置为0，而被激活的图片透明度设置为1；
优点：实现最为简单，代码量小，图片过渡自然；
缺点：没有左右滑动效果

HTML

<div id='container'>    <ul id='img-list'>        <li><img src=''/></li>        <li><img src=''/></li>        <li><img src=''/></li>        <li><img src=''/></li>    </ul>    <a id='pre-btn'><span></span></a>    <a id='next-btn'><span></span></a></div>

CSS

#container{    width:100%;    position:relative;    overflow:hidden;}#img-list{    width:100%;    position:absolute;    left:0;    top:0;    list-style:none;}#img-list li{    width:100%;    position:absolute;    left:0;    top:0;    opacity:0;}#img-list li:nth-child(1){    opacity:1;}#pre-btn{    width:50px;    height:100%;    position:absolute;    left:0;    top:0;    z-index:10;}#next-btn{    width:50px;    height:100%;    position:absolute;    right:0;    top:0;    z-index:10;}

JS

window.onload=function(){    var img_list=document.getElementById('img-list');    var li_list=img_list.getElementsByTagName('li');    var pre_btn=document.getElementById('pre-btn');    var next_btn=document.getElementById('next-btn');    var current=0;    //显示第i张    function showImg(index){        for(var i=0;i<li_list.length;i++){            li_list[i].style.opacity=0;        }        li_list[index].style.opacity='1';    }    //上一页    pre_btn.click=funciton(){        current--;        showImg(current);    }    //下一页    next_btn.click=funciton(){        current++;        showImg(current);    }}

II 绝对定位+left

原理：首先，将所有图片分为四类，激活的、激活的上一页、激活的下一页、其他，定位分别为left:0;、left:-100%;、left:100;、left:100%;，其他图片；接着，实现上下键按钮的修改active的图片下标；动态修改图片的class，切换的动画用CSS3的transition来实现；
优点：实现较为简单，代码量小，有图片滑动效果；
缺点：最后一张时候点击下一张有明显的缝隙
HTML

<div id='container'>    <ul id='img-list'>        <li class='active'><img src=''/></li>        <li class='active-next'><img src=''/></li>        <li class=''><img src=''/></li>        <li class='active-pre'><img src=''/></li>    </ul>    <a id='pre-btn'><span></span></a>    <a id='next-btn'><span></span></a></div>

CSS

#container{    width:100%;    position:relative;    overflow:hidden;}#container:before {    content: '';    height: 0.1px;    display: inline-block;    padding-bottom: 50%;}#img-list{    width:100%;    height:100%;    position:absolute;    left:0;    top:0;    list-style:none;}#img-list li{    width:100%;    height:100%;    position:absolute;    left:0;    top:0;    opacity:0;    transition:all 0.3s ease 0s;}#img-list li img{    width:100%;}#img-list li.active{    opacity:1;    left:0;}#img-list li.active_pre{    opacity:0;    left:-100%;}#img-list li.active_next{    opacity:0;    left:100%;}#pre-btn{    width:50px;    height:100%;    position:absolute;    left:0;    top:0;    z-index:10;}#next-btn{    width:50px;    height:100%;    position:absolute;    right:0;    top:0;    z-index:10;}

JS

window.onload=function(){    var img_list=document.getElementById('img-list');    var li_list=img_list.getElementsByTagName('li');    var pre_btn=document.getElementById('pre-btn');    var next_btn=document.getElementById('next-btn');    var n=li_list.length;    var current=0;    //显示第i张    function changeState(index){        var pre=(index-1<0)?n:index-1;        var next=(index+1>n+1)?0:index+1;        for(var i=0;i<li_list.length;i++){            li_list[i].className=0;        }        li_list[index].className='active';        li_list[pre].className='active_pre';        li_list[next].className='active_next';    }    //上一页    pre_btn.click=funciton(){        current=(current-1<0)?n:current-1;        changeState(current);    }    //下一页    next_btn.click=funciton(){        current=(current+1>n-1)?0:current+1;        changeState(current);    }}

III 绝对定位+left+DOM操作

原理：在第二种方法的基础上增加了DOM操作。即点击下一页后，先将第一个图片复制到ul末尾，然后左移ul，接着删除第一个图片，最后恢复ul的left值；点击上一页，将最后一个图复制到头部之前，然后右移并删除最后一个元素。
优点：无缝切换，过渡自然；
缺点：实现复杂，代码量大
HTML

<div id='container'>    <ul id='img-list'>        <li><img src=''/></li>        <li><img src=''/></li>        <li><img src=''/></li>        <li><img src=''/></li>    </ul>    <a id='pre-btn'><span></span></a>    <a id='next-btn'><span></span></a></div>

CSS

#container{    width:100%;    position:relative;    overflow:hidden;}/*占位并保持长宽比*/#container:before{    content: "";    display: inline-block;    padding-bottom: 40%;    width: .1px;    vertical-align: middle;}#img-list{    width: 400%;    height: 100%;    position: absolute;    left: 0;    top: 0;    list-style:none;}#img-list li{    width:100%;    float:left;    position:relative;}#img-list li img{    max-width:100%;}#pre-btn{    width:50px;    height:100%;    position:absolute;    left:0;    top:0;    z-index:10;    cursor: pointer;}#next-btn{    width:50px;    height:100%;    position:absolute;    right:0;    top:0;    z-index:10;    cursor: pointer;}

JS

window.onload = function () {    var container = document.getElementById('container');    var img_list = document.getElementById('img-list');    var li_list = img_list.getElementsByTagName('li');    var pre_btn = document.getElementById('pre_btn');    var next_btn = document.getElementById('next_btn');    var n = li_list.length;    var btn = true;    //获取元素当前属性值    function getStyle(obj, arr) {            if (obj.currentStyle) {                  return obj.currentStyle[arr];  //针对ie        } else {                  return document.defaultView.getComputedStyle(obj, null)[arr];            }      }    //自定义的移动函数    //obj为节点，json为需要变化的属性，interval为动画间隔（决定帧数），sp可以用来改变变化速度，fn为回调函数    function move(obj, json, interval, sp, fn) {        clearInterval(obj.timer);        obj.timer = setInterval(function () {            var flag = true;            for (var arr in json) {                var icur = 0;                if (arr == 'toLeft') {                    //获取的**px转化为整型                    var icur = parseInt(getStyle(obj, 'left'));                }                var speed = (json[arr] - icur) * sp;                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);                //判断当前属性值与变化的最终结果是否相等                if (icur != json[arr]) {                    flag = false;                }                //一帧的变化值                if (arr == "toLeft") {                    obj.style.left = (icur + speed) + "px";                }            }            //如果变化完成了的话，调用回调函数            if (flag) {                clearInterval(obj.timer);                if (fn) {                    fn();                }            }        }, interval);    }    //点击下一张，把ul第一张复制到尾部，ul左移一个图片宽度，将ul第一张删除，ul的left设置为0（即右移一个图片宽度）    next_btn.onclick = function () {        if (btn) {            btn = false;            //第一步复制到尾部            var li_first = li_list[0].cloneNode(true);            img_list.appendChild(li_first);            //第二步ul左移            var l = li_list[1].offsetWidth;            move(container, {                toLeft: -l            }, 10, 0.03, function () {                container.removeChild(img_list[0]);                img_list.style.left = '0px';                btn = true;            })        }    }    //点击上一张，将最后一张复制到ul头部，将ul左移一个图片宽度，最后ul右移至left为0    pre_btn.onclick = function () {        if (btn) {            btn = false;            var li_last = li_list[n - 1].cloneNode(true);            img_list.insertBefore(li_last, li_list[0]);            img_list.style.left = -li_list[1].offsetWidth + 'px';            move(img_list, {                toLeft: 0            }, 10, 0.03, function () {                img_list.removeChild(li_list[n]);                btn = true;            })        }    }}