JavaScript（三十一）滑动图片轮播demo

最新推荐文章于 2021-07-21 11:50:54 发布

We_jia

最新推荐文章于 2021-07-21 11:50:54 发布

阅读量202

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/We_jia/article/details/87892509

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

滑动图片轮播的原理就是整体移动，也就是动态改变图片父容器的marginLeft值，来实现整体向左移动

效果展示

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            margin: 0 auto;
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .block > div:nth-child(1) {
            width: 4900px;
            height: 400px;
            margin-left: 0;
        }

        .tranAnimate {
            transition: margin-left 0.5s ease-in-out;
        }

        .block > div > img {
            float: left;
            width: 700px;
            height: 400px;
        }

        .dian {
            position: absolute;
            width: 108px;
            height: 15px;
            bottom: 20px;
            left: 296px;
        }

        .dian > div {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin: 0 2px;
            border: 2px solid black;
            box-sizing: border-box;
        }

        .btn {
            width: 700px;
            height: 40px;
            position: absolute;
            top: 180px;
            z-index: 10;

        }

        .btn > span:nth-child(1) {
            width: 40px;
            background-color: #c6c6c6;
            color: white;
            display: block;
            float: left;
            text-align: center;
            line-height: 40px;
            margin-left: -40px;
            cursor: pointer;
            opacity: 1;
            transition: all 0.5s linear;
            border-radius: 50%;
        }

        .btn > span:nth-child(2) {
            color: white;
            width: 40px;
            background-color: #c6c6c6;
            display: block;
            float: right;
            text-align: center;
            line-height: 40px;
            margin-right: -40px;
            cursor: pointer;
            opacity: 1;
            transition: all 0.5s linear;
            border-radius: 50%;
        }

        .marleft {
            margin-left: 0 !important;
            opacity: 1 !important;
        }

        .marright {
            margin-right: 0 !important;
            opacity: 1 !important;
        }

    </style>
</head>
<body>
<div class="block">
    <div>
        <img src="./img/1.jpg" alt=""/>
        <img src="./img/2.jpg" alt=""/>
        <img src="./img/3.jpg" alt=""/>
        <img src="./img/4.jpg" alt=""/>
        <img src="./img/5.jpg" alt=""/>
        <img src="./img/6.jpg" alt=""/>
        <img src="./img/1.jpg" alt=""/>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="btn">
        <span><</span>
        <span>></span>
    </div>
</div>


<script>
    var time;
    var b = document.getElementsByClassName("block")[0];
    var bimg = b.children[0];   //图片的父元素
    var count = 0;
    var dian = document.getElementsByClassName("dian")[0];
    var dianChild = dian.children;

    //获取按钮
    var btn = document.getElementsByClassName("btn")[0];
    var btnChild = btn.children;


    dianChild[0].style.backgroundColor = "black";
    showTime();
    function showTime() {
        time = setInterval(function () {
            Anmiton();
        }, 1500);
    }
function Anmiton(){
        bimg.className = "tranAnimate";
        dianChild[count].style.backgroundColor = "white";
        count++;
        var index = count >= bimg.children.length - 1 ? 0 : count;//判断点的位置
        dianChild[index].style.backgroundColor = "black";
        bimg.style.marginLeft = ((-700) * count) + "px";

        //动画完成状态 0.5s  完成的同时判断要不要返回
        setTimeout(function () {
            if (count >= bimg.children.length - 1) {
                count = 0;
                bimg.className = "";
                bimg.style.marginLeft = "0";
            }
        }, 500);
    }

    //点点事件
    for (var i = 0; i <= dianChild.length - 1; i++) {
        dianChild[i].index = i;
        dianChild[i].onmouseenter = function () {
            dianChild[count].style.backgroundColor = "white";
            this.style.backgroundColor = "black";
            bimg.style.marginLeft = ((-700) * this.index) + "px";
            count = this.index;
        }
    }

    //鼠标进入 离开
    b.onmouseenter = function () {
        for (var i = 0; i < btnChild.length; i++) {
            btnChild [i].className = i ? "marright" : "marleft";  //0表示alse
        }
        clearInterval(time);


    };
    b.onmouseleave = function () {
        for (var i = 0; i < btnChild.length; i++) {
            btnChild [i].className = "";  //0表示alse
        }
        showTime();
    };
    //窗体失焦获焦
    document.addEventListener("visibilitychange", function () {
        if (!document["hidden"]) {
            //激活
            showTime();
        } else {
            clearInterval(time);
        }
    });

   /*  左右按钮*/

        btnChild[0].onclick=function(){
            dianChild[count].style.backgroundColor ="white";
            count--;
            if(count<0){
                bimg.className ="";
                count=5;
                bimg.style.marginLeft = "-4200px";
                setTimeout(function () {
                    bimg.className = "tranAnimate";
                    bimg.style.marginLeft = (-700 * count) + "px";
                }, 1);

            }
            else{
                bimg.className ="tranAnimate";
                bimg.style.marginLeft =(-700*count)+"px";
            }

            dianChild[count].style.backgroundColor ="black";

        };
        btnChild [1].onclick=function(){
            Anmiton();
        }
</script>

</body>
</html>