完整轮播代码整理

<style type="text/css">
            *{
                margin: 0px auto;
                padding: 0px;
            }
            #tp{
                width: 800px;
                height: 350px;
            }
            .img{
                display: none;
            }
            #dian_kuang{
                width: 200px;
                height: 15px;
                position: relative;
                top: -25px;
            }
            .circle{
                width: 13px;
                height: 13px;
                float: left;
                margin-left: 20px;
                border: 2px solid black;
                border-radius: 100px;
                background-color: #FFF;
            }
            .circle:hover{
                cursor: pointer;
            }
            .jt{
                float: left;
            }
        </style>

<div id="tp">
            <img style="display: block;" class="img" src="0B55SHC8U9EB.jpg" width="100%" height="350" />
            <img class="img" src="a7b0dbaeb11283ab2745586c10cf52f6.jpg" width="100%" height="350"/>
            <img class="img" src="ab20ac122c8f7823b2ee031c6372ab33.jpg" width="100%" height="350"/>    
        </div>
        
        <div id="dian_kuang">
            <div  bs="0" class="circle" style="border-color: green;" onclick="cir.img(this,'0')" onmouseover="qing()" onmouseout="chong()"></div>
            <div  bs="1" class="circle" onclick="cir_img(this,'1')" onmouseover="qing()" onmouseout="chong()"></div>
            <div  bs="2" class="circle" onclick="cir_img(this,'2')" onmouseover="qing()" onmouseout="chong()"></div>
        </div>
        
        <div id="zuo" class="jt" onclick="jiantou(-1)" onmouseover="qing()" onmouseout="chong()">
            左点击
        </div>
        <div id="you" class="jt" onclick="jiantou(1)" onmouseover="qing()" onmouseout="chong()">
            右点击
        </div>

<script type="text/javascript">
    window.onload=function(){
        
    }
    var index=0;
    var timer=setIerval("qiehuan()",2000);
    function qiehuan(){
        index++;
        index=index>=3?0:index;
//        图片的切换
   var img=document.getElementsByClassName("img");
           for(var i=0;i<img.length;i++){
               img[i].style.display="none";
           }
           img[index].style.display="block";
           
//         圆点的切换
    var cil=document.getElementsByClassName("circle");
    for (var i=0;i<cil.length;i++) {
        cil[i].style.borderColor="red";
    }    
    cil[index].style.borderColor="green";
    }
    
//    点击圆点切换图片
    function cir_img(t,s){
        var img=document.getEelementsByClassname("img");
        for(var i=0;i<img.length;i++){
            img[i].style.display="none";
        }
        img[s].style.display="block";
        var cil=document.getElementsByClassName("circle");
        for (var i=0;i<cil.length;i++) {
            cil[i].style.borderColor="red";
        }
        t.style.borderColor="green";
    }
//    点击箭头事件
    function jiantou("bs"){
        index=index+bs;
        index=index>3?0:index<0?2:index;
        
//        图片的切换
    var img=document.getElementsByClassName("img");
    for(var i=0;i<img.length;i++){
        img[i].style.display="none";
    }
    img[index].syle.display="block";
//  圆点的切换
    var cil=document.getElementsByClassName("circle");
    for(var i=0;i<cil.length;i++){
        cil[i].style.borderColor="red";
    }
    cil[index].style.borderColor="green";
    }
//    清除定时器
    function qing(){
        window.clearInterval(timer);
}
//重新定时器
    function chong(){
        timer=setInterval("qiehuan()",2000);
}
</script>