JS轮播图带序号小点和左右按钮

轮播图作为前端比较简易的动画，使用非常频繁，这里记录以便使用

此轮播图为最简易自动播放，非无缝，但有按钮，有序号跳转小点

想看全套轮播图可以查看我的分类轮播图全套

html布局

<div style="width: 100%;">
        <div id="zuo" onClick="huan('zuo')">《</div>
        <div class="tu">
            <img src="02xsxx.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181011qlqnlt.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181011rcqx.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181016qdxq.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181018-sdlt0.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181022fanzeng.jpg" alt="">
        </div>
<!-- 此处有函数 huan() 参数为   'zuo' 和  'you' 切换图片按钮-->
        <div id="you" onClick="huan('you')">》</div>
    </div>

    <div id="dian">
        <div style="width:230px; margin: auto; height: 30px;">
<!-- 此处添加函数   dianji() 点击小点切换图片-->
            <div onClick="dianji(0)" class="dian"></div>
            <div onClick="dianji(1)" class="dian"></div>
            <div onClick="dianji(2)" class="dian"></div>
            <div onClick="dianji(3)" class="dian"></div>
            <div onClick="dianji(4)" class="dian"></div>
            <div onClick="dianji(5)" class="dian"></div>
        </div>
    </div>

css样式

        *{
        margin: 0 auto;
        padding: 0 auto;
    }
    .tu{
        float: left;0
        width: 100%;
        display: none;
    }
    .tu img{
        width: 100%;
    }
    #zuo{
        position: absolute;
        top: 300px;
        background-color: rgba(255,255,255,0.50);
        width: 40px;
        height: 40px;
    }
    #you{
        position: absolute;
        top: 300px;
        background-color: rgba(255,255,255,0.50);
        width: 40px;
        height: 40px;
        right: 5px;
    }

    #dian{
        text-align: center;
        position: relative;
        top: -60px;
    }

    .dian{
        float: left;
        border: 1px solid rgba(255,255,255,1.00);
        border-radius: 30px;
        width: 30px;
        height: 30px;
        margin-left: 5px;
        background-color: rgba(0,0,0,1.00);
    }

同样布局不用要完全可以自己布局，下面看js

　　 var jishu=0;    //记录到第几张
    var tu;            //接收图片的dom
    var dian;        //接收小点dom
//    自己播放函数，不懂请看轮播图全套里 JS最通俗易懂简易轮播实现
    function aaa(){
        tu =document.getElementsByClassName("tu");
        dian =document.getElementsByClassName("dian"); 

        //显示当前隐藏其他
        for(var a=0;a<tu.length;a++){
            if(a==jishu){
                tu[jishu].style.display="block";
                dian[jishu].style.border="1px solid rgba(255,0,4,1.00)";
                dian[jishu].style.backgroundColor = "white";
            }else{
                tu[a].style.display="none";
                dian[a].style.border="1px solid rgba(255,255,255,1.00)";
                dian[a].style.backgroundColor = "black";
            }
        }
        //到最后一张回到第一张
        if(jishu>tu.length-2){
            jishu=0;
        }else{
            jishu++;
        }

    }
    aaa();
    var dong = setInterval("aaa()",2000);
//    切换上一张和下一张
    function huan(data){
//        先暂停，防止出现手动切换和自动切换重叠
        clearInterval(dong);
//        判断实参
        if(data=="zuo"){
// jishu<=1请情况有两种，0和1
            if(jishu<=1){
　　// 如果是0那么当前显示的是第6张，请结合上面jishu清零语句
                　　if(jishu==0){
　　// 那么jishu=4就是显示 第五张
                    　　jishu=4;
                　　}else{
　　// 否则jishu=1时，显示的是第一张，结合上面jishu+1操作，jishu=5就是显示第六张
                    　　jishu=5;
                　　}
               　　
            }else{
　　// 此处否则 显示上一张，此处需要-2因为每次运行完jishu都会多加1
                jishu=jishu-2;
            }

        }else{
　　// 否则 此处是向右滚动，向左判断完成后，向右只考虑最后一张的情况。jishu=6时显示的是五张，再点击一次需要回到第一张
            if(jishu>=6){
                jishu=0;
            }
        }
　　// 判断完运行左还是右之后重新调用函数即可
        aaa();
        dong = setInterval("aaa()",2000);
    }
//
//    小点翻页
    function dianji(data){
        clearInterval(dong);
　　// 参考html代码中，给此函数的实参
        jishu = data;

        aaa();
        dong = setInterval("aaa()",2000);
    }