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

 

 


 

posted @ 2019-01-13 16:48  一半人生  阅读(945)  评论(0编辑  收藏  举报