图片轮播、自动轮播、点击轮播（一）

HTML部分

<div id="slide_two" class="slide">
<ul style="transform: translateX(-3806px); width: 600%;">
<li style="width: 16.6667%;"><img src="images/banner.png"></li>
<li style="width: 16.6667%;"><img src="images/banner2.png"></li>
</ul>
<div>
<span class="prev_btn"> &lt; </span>
<span class="next_btn"> &gt; </span>
</div>
</div>

js部分

window.onload=function(){
    slideLlx("slide_two");
    function slideLlx(slideID){
        var slide=document.getElementById(slideID);
        var slideLis=slide.getElementsByTagName('li');
        var conut=slideLis.length;

        var imgs=slide.getElementsByTagName("img");
        var firstSrc=imgs[0].getAttribute("src");
        var lastSrc=imgs[imgs.length-1].getAttribute("src");
        
        var offset=slide.clientWidth;//clientWidth：对象内容的可视区宽度，不包括滚动条等边线
        var index=1;
        var slideUl=slide.getElementsByTagName("ul")[0];
        var Timer;
        var firstLi=document.createElement("li");
        var firstIMG=document.createElement("img");
        firstIMG.setAttribute("src",lastSrc);//setAttribute 添加指定的属性，并为其赋指定的值。
        firstLi.appendChild(firstIMG);//appendChild 可向节点的子节点列表的末尾添加新的子节点
        slideUl.insertBefore(firstLi,slideUl.firstChild);//insertBefore 在指定的已有子节点之前插入新的子节点。
        slideUl.style.transform="translateX("+(-offset)+"px)";
        var lastLi=document.createElement("li");
        var lastIMG=document.createElement("img");
        lastIMG.setAttribute("src",firstSrc);lastLi.appendChild(lastIMG);
        slideUl.appendChild(lastLi);
        var circle_btn=document.createElement("div");circle_btn.setAttribute("class","circle_btn");
        for(var i=0;i<conut;i++){
            var cbtn=document.createElement("button");
            circle_btn.appendChild(cbtn);
        }
        slide.appendChild(circle_btn);
        var circles=Array.prototype.slice.call(circle_btn.getElementsByTagName("button"));
        circles[0].setAttribute("class","active");
        circles.forEach(function(e,i){
            e.onclick=function(){
                closeAutoSlide();
                openTransition();
                index=i+1;
                goslide();
                beActive(this);
            }
        });
        var btn_prev=slide.getElementsByClassName("prev_btn")[0];
        btn_prev.onclick=function(){
            closeAutoSlide();
            openTransition();
            index--;
            goslide();
            if(index<1){
                index=conut;
                beActive(circles[index-1]);
                setTimeout(function(){closeTransition();
                    goslide();
                },600)
            }else{
                beActive(circles[index-1]);
            }
        }
        var btn_next=slide.getElementsByClassName("next_btn")[0];
        btn_next.onclick=function(){
            openTransition();
            index++;
            goslide();
            if(index>conut){
                index=1;
                beActive(circles[index-1]);
                setTimeout(function(){
                    closeTransition();
                    goslide();
                },600)
            }else{
                beActive(circles[index-1]);
            }
        }
        openAutoSlide();
        function openAutoSlide(){
            if(Timer){
                window.clearInterval(Timer);
            }
            Timer=setInterval(function(){
                beActive(circles[index-1]);
                btn_next.onclick();
            },6000)
        }
        function closeAutoSlide(){
            window.clearInterval(Timer);
            setTimeout(function(){
                openAutoSlide();
            },8000);
        }
        btn_next.onmousedown=function(){
            closeAutoSlide();
        }
        btn_prev.onmousedown=function(){
            closeAutoSlide();
        }
        function beActive(btn){
            circle_btn.getElementsByClassName("active")[0].setAttribute("class","");
            btn.setAttribute("class","active");
        }
        function openTransition(){
            slideUl.style.transition="all .6s";
        }
        function closeTransition(){
            slideUl.style.transition="none";
        }
        function goslide(){
            slideUl.style.transform="translateX(-"+index*offset+"px)";
        }
        slideUl.style.width=slideLis.length*100+"%";
        var liWidth=100/slideLis.length+"%";
        for(var i=0;i<slideLis.length;i++){
            slideLis[i].style.width=liWidth;
        }
        window.onresize=function(){
            closeTransition();
            offset=slide.clientWidth;
            goslide();
        }
    }
}