<style>
        ul{
            margin:0;
            padding:0;
            list-style-type:none;
        }
        .imgoc{
            width:75%;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }
        .imgocdiv{
            width:600%;
            position:relative;
            left:-100%;
            transition-duration:.5s;
        }
        .imgocdiv img{
            width:16.66666666%;
            float:left;
        }
        .imgoc ul{
            text-align:center;
            position:absolute;
            width:100%;
            bottom:0px;
        }
        .imgoc ul li{
            display:inline-block;
            width:10px;
            height:10px;
            border-radius:50%;
            background-color:red;
            margin:4px;
        }
        .imgoc .imgactive{
            background-color:blue;
        }
        .imgocbtn{
            width:40px;
            height:45px;
            font-size:30px;
            position:absolute;
            top:50%;
            transform:translateY(-20px);
        }
        .imgocbtn1{
            left:0;
        }
        .imgocbtn2{
            right:0;
        }
    </style>
    <div class="imgoc">
        <div class="imgocdiv">
            <img src="http://www.jiujiuba.com/xxpict2/picnews/7132249442.jpg" />
            <img src="http://pic.putaojiayuan.com/uploadfile/tuku/KaTongChaHua/12190515346673.jpg" />
            <img src="http://img.ivsky.com/download/Photo/UploadFiles/2009-7/2009714102041365.jpg" />
            <img src="http://www.dianmeng.com/moban/tupian/200808/2008080611515139.jpg" />
            <img src="http://www.jiujiuba.com/xxpict2/picnews/7132249442.jpg" />
            <img src="http://pic.putaojiayuan.com/uploadfile/tuku/KaTongChaHua/12190515346673.jpg" />
        </div>
        <ul>
            <li class="imgactive"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button class="imgocbtn imgocbtn1"><</button>
        <button class="imgocbtn imgocbtn2">></button>
    </div>
    <script>
        var div=document.querySelector(".imgocdiv");
        var lis=document.querySelectorAll(".imgoc ul li");
        var last=document.querySelector(".imgocbtn1");
        var next=document.querySelector(".imgocbtn2");
        var thisIndex=0;
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].onclick=function(){
                thisIndex=this.index;
                move();
            }
        }
        //给轮播设置自动切换
        var timer;
        function timing(){
            timer=setInterval(function(){
                thisIndex++;
                move();    
            },3000)
        }
        timing();
        //当鼠标在图片上停止切换，离开再运行
        div.onmouseover=function(){
            clearInterval(timer);
        }
        div.onmouseout=function(){
            timing();
        }
        last.onmouseover=function(){
            clearInterval(timer);
        }
        next.onmouseover=function(){
            clearInterval(timer);
        }
        last.onmouseout=function(){
            timing();
        }
        next.onmouseout=function(){
            timing();
        }
        //点击切换上一个
        lastMove();
        function lastMove(){
            last.onclick=function(){
                last.onclick="";
                thisIndex--;
                move();
                setTimeout(function(){
                    lastMove();
                },500)
            }
        }
        //点击切换下一个
        nextMove();
        function nextMove(){
            next.onclick=function(){
                next.onclick="";
                thisIndex++;
                move();
                setTimeout(function(){
                    nextMove();
                },500)
            }
        }
        function move(){
            for(var j=0;j<lis.length;j++){
                lis[j].className="";
            }
            div.style.left=-(thisIndex+1)*100+"%";
            if(thisIndex==lis.length){
                thisIndex=0;
                lis[thisIndex].className="imgactive";
                setStyle();
            }else if(thisIndex==-1){
                thisIndex=lis.length-1;
                lis[thisIndex].className="imgactive";
                setStyle();
            }else{
                lis[thisIndex].className="imgactive";
            }
        }
        function setStyle(){
            setTimeout(function(){
                div.style.transitionDuration="0s";
                div.style.left=-(thisIndex+1)*100+"%";
                setTimeout(function(){
                    div.style.transitionDuration="0.5s";
                },30)
            },500)
        }
    </script>

    
    

        

        
        

        
        <
        >