JavaScript实现图片轮播（动画animation）

实现效果：
在这里插入图片描述
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="banner">
    <ul class="bannerUl" id="bannerUI">
        <li class="show" style="background: url('img/banner1.png') top center no-repeat"><a href="#"></a></li>
        <li style="background: url('img/banner2.png') top center no-repeat"><a href="#"></a></li>
        <li style="background: url('img/banner3.png') top center no-repeat"><a href="#"></a></li>
        <li style="background: url('img/banner4.png') top center no-repeat"><a href="#"></a></li>
    </ul>
    <!--控制  箭头-->
    <a id="bannerLeft" class="bannerAll bannerPrev" href="javascript:void(0)"><p>prev</p></a>
    <a id="bannerRight" class="bannerAll bannerNext" href="javascript:void(0)"><p>next</p></a>
    <!--控制  箭头 end-->

    <!--阴影-->
    <div class="yingY">
        <img src="img/yingY.png" />
    </div>
    <!--阴影 end-->

    <!--控制  圆点-->
    <div class="controls" id="controls">
        <span class="on"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!--控制  圆点 end-->
</div>
<script src="js/lunbo.js"></script>
</body>
</html>

CSS：

.banner{
    width: 100%;
    min-width: 1200px;
    height: 500px;
    background: #ccc;
    position: relative;
}
.bannerUl,
.bannerUl>li,
.bannerUl>li>a{
    width: 100% ;
    height: 500px;
}
.bannerUl>li>a{
    display: block;
}
.bannerUl>li{
    position: absolute;
    display: none;
    width: 1200px;
    padding-left: 165px;
   animation:ani 0.5s 0.2s both;
}
@keyframes ani {
    0%{
        transform: scale(0.2,0.2);
        opacity: 0;
    }
    25%{
        transform:scale(0.4,0.4);
        opacity: 0.2;
    }
    50%{
        transform:scale(0.6,0.6);
        opacity: 0.4;
    }
    75%{
        transform:scale(0.8,0.8);
        opacity: 0.6;
    }
    100%{
        transform: scale(1,1);
        opacity: 1;
    }
}
.bannerUl>.show{
    display: block;
}
.bannerAll{
    background: #000000;
    color: #FFFFFF;
    top: 50%;
    position: absolute;
    font-size: 36px;
    margin-top: -45px;
    opacity: 0;
}
.banner:hover .bannerAll{
    opacity: 0.3;
}
.banner .bannerAll:hover{
    opacity: 0.8;
}
.bannerPrev{
    left: 0;
}
.bannerNext{
    right: 0;
}
.yingY{
    text-align: center;
}
.controls{
    bottom: 30px;
    text-align: center;
    width: 100%;
}
.controls>span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #a8a8a8;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 20px;
    opacity: 0.5;
    cursor: pointer;
}
.controls>.on{
    opacity: 1;
    background: #db2d15;
    width: 40px;
}

JS：

{
    let bannerLeft=document.getElementById("bannerLeft");
    let bannerRight=document.querySelector("#bannerRight");
    let bannerUI=document.getElementById("bannerUI");
    let controls=document.getElementById("controls");
    let dots=controls.children;//所有点的字标签
    let lis=bannerUI.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");
        //让其他图片隐藏，让lis[index]的兄弟标签去掉类show
        removeSiblingClass(lis[index],"show");

        //点的切换
        dots[index].classList.add("on");
        removeSiblingClass(dots[index],"on");
    };

    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);//显示图片
    };

    bannerLeft.addEventListener("click",goLeft);
    bannerRight.addEventListener("click",goRight);
    //给点添加点击事件
    for(let i=0;i<=dots.length-1;i++){
        dots[i].addEventListener("click",function (event) {
            index=i;//当前的索引
            showPic(index);//显示当前索引的图片
        });
    }
}

坚持坚持-未来可期$$

发布了20 篇原创文章 · 获赞 34 · 访问量 885

私信关注

JavaScript实现图片轮播（动画animation）

猜你喜欢