JS事件笔记：banner轮播

利用列表对banner图片进行布局，用绝对定位叠加图片，以display隐藏图片和显示第一张图片，用定位布局切换按钮和控制点；

HTML代码：

<body>
<!-- banner -->
<div class="banner">
    <ul class="bannerUl" id="bannerUl">
        <li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第一张图片</p></div></a></li>
        <li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第二张图片</p></div></a></li>
        <li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第三张图片</p></div></a></li>
        <li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第四张图片</p></div></a></li>
    </ul>

    <!-- 左右切换 -->
    <a id="btnPrev" class="bannerBtn bannerPrev" href="javascript:void (0)"><img src="images/prev.png" alt=""></a>
    <a id="btnNext" class="bannerBtn bannerNext" href="javascript:void (0)"><img src="images/next.png" alt=""></a>
    <!-- 左右切换 end -->

    <!-- 控制块 -->  <!-- 利用JS遍历li生成控制点 -->
    <div class="controls ctrl_bg" id="ctrls">

    </div>
    <!-- 控制块 end -->
</div>
<!-- banner end -->
</body>

Javascript代码：

{
    //获取页面id
    let btnPrev = document.getElementById("btnPrev");
    let btnNext = document.getElementById("btnNext");
    let bannerUl = document.getElementById("bannerUl");
    let ctrls = document.getElementById("ctrls");  
    let lis = bannerUl.children;  //。找到所有的图片

    let index = 0;  //图片索引

    /* 找所有的兄弟节点的函数 */
    let findSiblings = function( tag ){
        let  child = tag.parentNode.children ; // 找到所有的 子标签，包括 tag
        let  siblings = [] ; // 空数组，存放兄弟们
        for( let i=0 ; i <= child.length - 1 ; i++){
            if(  child[i] === tag ){
                continue;
            }
            siblings.push( child[i] ); // 把兄弟放入数组中。给数组添加元素
        }
        return siblings ; // 返回兄弟节点
    };

    // 去掉兄弟标签的指定类
    let removeSiblingClass = function( tag , classN ){
        let siblings = findSiblings(tag);
        for( let i = 0 ; i <= siblings.length-1 ; i++ ){
            siblings[i].classList.remove( classN );
        }
    };

    let showPic = function( index ){
        // 让对应图片显示
        lis[index].classList.add( "show" );
        // 让其它图片隐藏
        removeSiblingClass( lis[index] , "show" );
        // 控制点的切换
        dots[index].classList.add("on");
        removeSiblingClass( dots[index] , "on" );
    };

    //动态生成span标签，生成控制点
    for( let i = 0; i <= lis.length-1 ; i++ ){
        let span = document.createElement("span");
        ctrls.appendChild(span);
    }
    let dots = ctrls.children;  //扎到所有的控制点

    showPic( index );  // 默认显示索引为0的那一张

    let goLeft = function( event ){
        index--;
        if( index < 0 ){
            index = lis.length-1;
        }
        showPic( index );  // 显示图片
    };
    let goRight = function( event ){
        index++;
        if( index > lis.length - 1 ){
            index = 0;
        }
        showPic( index );  // 显示图片
    };
    
    btnPrev.addEventListener("click",goLeft);
    btnNext.addEventListener("click",goRight);
    
    //控制点的点击事件，点击切换图片
    for( let i =0 ; i <= dots.length-1 ; i++ ){
        dots[i].addEventListener("click",function(){
            index = i;
            showPic( index );
        })
    }
}

CSS代码：

.banner{
    width: 1000px;
    min-width: 760px;
    height: 600px;
    border:1px solid #333333;
    position: relative;
}
.bannerUl,
.bannerUl>li,
.bannerUl>li>a{
    width: 760px;
    height: 340px;
}
.bannerUl>li>a{
    display: block;
}
.bannerUl>li{
    position: absolute;
    top: 60px;
    left: 120px;
    display: none;      /* 隐藏图片 */
    overflow: hidden;   /* 阻止内容超出 */
}
.bannerUl>.show{
    display: block;     /* 显示图片 */
    animation: showAni 0.5s both;   /* 使用动画 */
}
.content{
    width: 100%;
    height: 57px;
    background-color: #77160a;
    position: absolute;
    bottom: 0;
    animation: contAni 0.5s both;
}
.content>p{
    color: #fff;
    font-size: 18px;
    line-height: 57px;
    margin-left: 30px;
    animation: pAni 0.3s 0.3s both;
}
.bannerBtn{
    width: 69px;
    height: 51px;
    position: absolute;
    top: 180px;
    opacity: 0.3;
    transition: opacity 0.3s;
}
.bannerBtn:hover{
    opacity: 0.8;
}
.bannerPrev{
    left: 60px;
}
.bannerNext{
    right: 60px;
}
.controls{
    position: absolute;
    top: 400px;
    left: 50%;
    margin-left: -380px;
    bottom: 30px;
    text-align: center;
    width: 760px;
}
.controls>span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #a8a8a8;
    margin: 10px 10px 10px 10px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.8;

}
.controls>.on{
    opacity: 1;
    background-color: #db2d15;
}
.ctrl_bg{
    box-shadow: 0 20px 10px -18px #333333 inset;   /* 设置控制块的背景阴影 */
}

/* 动画设置区 */
@keyframes showAni {  /* 背景透明度动画 */
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes contAni {  /* 内容的移动动画 */
    0%{
        opacity: 0;
        transform: translateY(57px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pAni {  /* 文字移动动画 */
    0%{
        transform: translateX(-300px);
    }
    100%{
        transform: translateX(0);
    }
}

ResidualBridge

发布了13 篇原创文章 · 获赞 2 · 访问量 316

私信关注

JS事件笔记：banner轮播

猜你喜欢