JS最通俗易懂简易轮播实现

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

此轮播图为最简易自动播放，非无缝，无按钮，无缩略图和序号

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

 

html 布局

<div style="width: 100%;">

        <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>

    </div>

.tu{
        float: left;
        width: 100%;
        display: none;
    }
.tu img{
        width: 100%;
    }

布局并不重要下面说js

var jishu=0;    //计数用来记录 该第几张图片显示  
    var tu;            //接收.tu的dom对象变量
//    主体函数
    function aaa(){
// 获取 dom
        tu =document.getElementsByClassName("tu"); 
        
        //显示当前隐藏其他

//    我们这里做了6张图片  所以length为6.  如果此处a<=tu.length 那么 length需要-1，因为操纵a从0到5刚好是6次
        for(var a = 0;a < tu.length; a++){
// 显示jishu的张数，所以让a与jishu对比
            if(a==jishu){
                tu[jishu].style.display="block";
// 否则除了与jishu相同的下标，其它的全部隐藏
            }else{
                tu[a].style.display="none";
            }
        }
        //到最后一张回到第一张，-2的原因：因为jishu和下标a是从0开始的，第六张就是下标5。
        if(jishu > tu.length-2){
            jishu=0;
　　　　// 否则不是最后一张，继续jishu+1，然后去上面与a做判断
        }else{
            jishu++;
        }
        
        
    }
　　// 调用第一次函数
    aaa();
// 两秒调用一次aaa函数
    var dong = setInterval("aaa()",2000);