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

    }
}